Question

尝试将hr对准其下方的div。这是CSS：

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

该行当前未与div＃main对齐，它在左侧过多：

<hr class="line">
<div id="main" class="container border">
    <div class="row">
    </div>
</div>

我该如何使其与div对齐，获得相同的宽度并同时使其具有响应性？

codepen here

Answer 1

我想这就是您想要的：codepen 您还可以删除小时余量

<div>
<hr class="line container">
<div id="main" class="container border">
    <div class="row">
        <div class="col-lg-5"><label for="title">Title</label><input id="title" type="text" placeholder="Title placeholder" name="title" value=""><label for="temp">Temperature</label><span id="tempArea" class="row"><span class="col-lg-4"><input type="radio" id="c" class="spaceradio" value="metric" checked=""><label for="c" class="radios">℃</label></span>
            <span
             class="col-lg-4"><input type="radio" id="f" class="spaceradio" value="imperial"><label for="f" class="radios">℉</label></span>
                </span><br><label for="temp">Wind</label><span id="windArea" class="row"><span class="col-lg-4"><input type="radio" id="n" class="spaceradio" value="true"><label for="n" class="radios">On</label></span><span class="col-lg-4"><input type="radio" id="o" class="spaceradio" value="false" checked=""><label for="o" class="radios">Off</label></span></span>
        </div>
        <div class="divider"></div>
        <div class="col-lg-5">
            <div class="border">
                <div class="row">
                    <div class="border-right col-lg-6"><img src="http://openweathermap.org/img/w/02d.png"></div>
                    <div class="col-lg-6"><br>
                        <h2>65.34<label>℉</label></h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

.line {
    border-top: 10px solid #ccc;
    padding: 0 !important;
}

Answer 2

hr样式更改为margin：1自动；但是，如果只想使其居中并且不需要顶部的边距，margin：auto就足够了。希望你得到答案

Answer 3

我从margin：1em 0;更改了这一行；余量：1 0; 现在，hr在中心。

和宽度：95％；

如何将hr与下面的div对齐？

3 个答案: