如何在拨动开关下方放置一条水平线答案

【问题标题】：How to put a horizontal line below a toggle switch如何在拨动开关下方放置一条水平线
【发布时间】：2014-11-12 05:51:05
【问题描述】：

我正在制作一个应用程序，并尝试在拨动开关下方放置一条线，该线的宽度应为 100%，应该覆盖整个页面，但线正好位于拨动开关下方。有人可以帮我吗？

代码是：

HTML：

<div id="main_paragraph">
    <p><b><h3>Mode of notification</h3></p></b><p id="p1">Select mode of     notification</p>
</div>

<div>
    <div id="row11"><img id="msg" src="http://megaicons.net/static/img/icons_sizes/8/60/256/basic-message-icon.png" alt="message_icon"><p id="p2"> 
&nbsp&nbsp&nbsp Email </p></div>
        <div id="row12"><div id="p3"><select name="flip-3" id="flip-3" data-role="slider" data-mini="true">
        <option value="off">Off</option>
        <option value="on">On</option>
            </select><div></div><br>


    </div>

 <div class="h_line"></div>

CSS：

#main_paragraph {
    margin-left:3%;

}

#p1 {
    margin-top:-10px;
    position:relative;
}
#msg
{   padding-top:15px;
    height:20px;
    width:25px;
    margin-left:5%;
     float:left;

}
#p2
{   text-shadow: none;

    display-block:inline;

}
#row11
{float:left;  
  margin-top:25px;
  width:70%;
  height:100px;
  ]   
}

#row12
{   float:right; 
    display-block:inline;

    height:100px;
    width:30%;
    margin-top:25px;
}
#p3
{
    padding-bottom:10px;
}
.h_line 
{   width:100%;
    height:1px; 
    background: #000000;
}

http://jsfiddle.net/tvaibhav/at7n0sbh/

【问题讨论】：

标签： jquery html css jquery-mobile

【解决方案1】：

.h_line 
{  
   width:100%;
   height:10px; 
   background: red;
   position: absolute;
   left: 0;   
}

Demo

对此可以有任意数量的解决方案。只需设置位置并离开：0。它会解决你的问题

编辑 Demo2

【讨论】：

抱歉，这超出了主 div 范围，我希望它位于第二个 DIV 内。
看看demo2。 @vaibhav 给定的 html 是错误的

【解决方案2】：

清除浮动 div，然后清除 h_line 类

<div class="clr" style="clear:both"></div>
<div class="h_line"></div>

Update link

【讨论】：

【解决方案3】：

只是一个想法...但是使用简单的<hr> 可能更容易且语义上更正确，但这取决于整体使用上下文，如果不同主题或主题的更多内容将遵循@ 987654322@ 将非常适合。如果您只是在元素下寻找非语义线，请尝试使用底部边框：

border-bottom: 1px solid  #000;

而且看起来你的标记有一些未封闭的元素，你的 css 可以使用一些爱......

display-block:inline; 应该是display: inline-block;

【讨论】：