html - 如何将 hr 与其下方的 div 对齐？

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 您还可以删除 hr margin

<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;
}