我在做一个应用程序,我试图在切换开关下方放置一条线,该线应为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/

最佳答案

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


Demo

可以有许多解决方案。只需设置位置,左:0。它会解决你的问题

编辑
Demo2

关于jquery - 如何在拨动开关下方放置水平线,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/26880177/

10-09 15:40