Как поставить горизонтальную линию под тумблером

Question

Я делал приложение, и я попытался установить линию под тумблером, линия должна быть 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/

Answer 1

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

Demo

Для этого может быть любое количество решений. Просто установите положение и влево: 0. Это буду решать ваши проблемы

EDIT Demo2

Answer 2

Снимите поплавки ДИВ то h_line класс

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

Update link

Answer 3

Просто мысли ... но это может быть проще и более семантически правильно использовать простой <hr>, но это зависит от общего контекста использования, если больше контента отличается nt тема или тема будет следовать за <hr> будет хорошей подгонкой. Если вы просто ищете несемантических линии под элементом, попробуйте использовать нижнюю границу:

border-bottom: 1px solid #000; 

Кроме того, похоже, разметка имеет некоторые незакрытые элементы и ваш CSS может использовать некоторую любовь ...

display-block:inline;, вероятно, следует display: inline-block;