Question

我试图将按钮放置在底部边框线的中间并居中（请参见图片）。然后，在所有屏幕尺寸上，它都会响应。我该如何实现？请帮忙。我还将代码上传到JSFiddle

代码

<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<style>

    * {
        box-sizing: border-box;
        font-family:Arial;
        font-size:12px;
    }

    img {
        width: 100%;
    }

    div#form-box {
        margin-top: 30px;
        text-align: center;
    }

    div#input-group {
        width: 90%;
        margin: 15px auto 5px;  /* top, left and right, bottom */
        position: relative;
        background-color: #fff;
        border: none;
        border-radius: 5px;
    }

    input[type="text"] {
        width: 100%;
        box-sizing: border-box;
        border: 2px solid #ccc;
        border-radius: 10px;
        font-size: 12px;
        background-color: white;
        background-repeat: no-repeat;
        padding: 10px 10px 10px 50px;
        margin-bottom:20px;

    }

    input[type="text"] :focus {
        border: 3px solid #B9E5FB;
        border-radius: 10px;
    }

    input[type="text"] ,select {
        outline:none
    }

    input#searchClasses {
        background-image: url('http://localhost/SFitness/APPS/img/search.png');
        background-position: 5px 2px;

    }

    input#searchLocation { 
        background-image: url('http://localhost/SFitness/APPS/img/location.png'); 
        background-size:18px;
        background-position: 14px 6px;
    }

    .drop-shadow {
        -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, .5);
        box-shadow: 0 0 10px 1px rgb(211, 211, 211, 0.8);
        border-radius:0px;
    }
    .container-fluid{
        width:auto
    }

    .container-fluid.drop-shadow {
        margin-top:2%;
        margin-left:5%;
        margin-right:5%
    }

    #content{
        width:100%;
        margin: auto;
        text-align: center;
        margin-top: 8px;
    }

    .form-group {
      width:100%;
      margin-bottom:10px;
    }

    hr {
        display: block;
        height: 1px;
        border: 0;
        border-top: 1px solid #ccc;
        margin: 1em 0;
        padding: 0;
    }

</style>

</head>

<body id="sfitness" >

<div id="form-box">
    <form>
        <div id="input-group">
            <input type="text" placeholder="Search activities" id="searchClasses" />
            <br/>
            <input type="text" placeholder="Location" id="searchLocation" />
        </div>
    </form>
</div>

<div id="content">
    <div class="container-fluid drop-shadow" style="overflow:auto;padding:0px;margin-top:20px">
        <div class="btn-group" style="margin:5%;width:90%">
            <button type="button" class="btn" style="width:33.33%">Today</button>
            <button type="button" class="btn" style="width:33.33%">Tomorrow</button>
            <button type="button" class="btn" style="width:33.33%">This week</button>

        </div>
         <br />
        <div style="width:90%;margin:0 5% 5%">
            <hr />
        </div>
        <br/>
        <br/>


        <br/>

        <button id="btn-checkin">Check-in</button>
    </div>
</div> 

</body>

</html>

Answer 1

也许像这样就足够了。我删除了内联样式，并为div创建了一个类，其中包含按钮和hr

<div class="divider">
    <button id="btn-search">Search</button>
    <hr />
</div>

CSS

.divider{
    position:relative;
    width:90%;
    margin-left:5%;
}

#btn-search{
    margin:auto;
    position:relative;
    z-index:2;
}

.divider hr {
    position: absolute;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    top:5px;
    left: 0;
    right: 0;
    z-index:1;
    width:90%;
}

在这里拨弄：https://jsfiddle.net/skvg6whb/26/

Answer 2

首先将表格包含在带边框的框中。有了它之后，请操作一个与容器底部边框重叠的按钮。

这是一种方法，只需在按钮上使用position: absolute，然后将其偏移一定数量的像素即可（在此示例中为-15px）。当然，这取决于按钮的固定高度。

<div id="my_big_box" style="position: relative; border: 1px solid black; width: 100%; min-height: 200px; display: flex; justify-content: center; align-items: center;">
    My Content
    <div id="my_button" style="position: absolute; bottom: -15px; padding: 5px; background-color: blue; border-radius: 5px">BUTTON</div>
</div>

...，或者，如果按钮位于框外，则可以使用负的上边距向上偏移它。同样，在这里，您必须知道按钮的高度以获得适当的偏移量，但是现在您也需要将其正确居中。这取决于持有框div和按钮的父容器。

<div id="my_parent_container" style="display: flex; flex-direction: column; align-items: center;">
    <div id="my_big_box" style="position: relative; border: 1px solid black; width: 100%; min-height: 200px; display: flex; justify-content: center; align-items: center;">
        My Content
    </div>
    <div id="my_button" style="z-index: 1; margin-top: -15px; padding: 5px; background-color: blue; border-radius: 5px">BUTTON</div>
</div>

无论如何，进行重叠可能意味着使用一些具有边距或绝对位置的固定像素高度。

无论您做什么，强烈建议您不要绘制底部边框，使其与边框的其余部分分开。您不需要处理不匹配的行。

底部边框线中间的CSS响应位置按钮，居中

2 个答案: