jquery - 分隔符在 HTML5 中不占 100%

Question

分隔符未占据容器的 100% 面积。日期和播放号码之间的分隔符左右不应有任何空格。请问有什么解决办法吗？ Fiddle

           `<div id="container1">
                <label data-role="none" id="date">Date : </label>
              <img src="images/overlay_divider_horizontal.png" id="splitter" />
                <label data-role="none" id="whiteboxlbl">Played numbers:</label><br><br>
            </div>
             #splitter{
                height:7px;
                margin:0;
                width:100%;
                display:inline;
            }
            #whiteboxlbl{
                font-size:16px;
                color:white;
                font-family: Arial, Helvetica, sans-serif;
                font-weight:bold;
            }
            #date{
                font-size:16px;
                color:white;
                font-family: Arial, Helvetica, sans-serif;
                font-weight:bold;
            }
            #container1{
                display:block;
                margin-top:10%;
                padding-right:5%;
                padding-left:5%;
                padding-bottom:5%;
                padding-top:5%;
                background: transparent -moz-linear-gradient(
                top,
                #37b6d2 0%,
                #4398bf);
                background: transparent -webkit-gradient(
                linear, left top, left bottom,
                from(#37b6d2),
                to(#4398bf));
                -moz-border-radius: 4px;
                -webkit-border-radius: 4px;
                border-radius: 4px;
                border: 1px solid #55b2be;
            }`

Answer 1

父容器的内边距设置为 5%，因此子元素只能在内边距允许的范围内展开。

要在您的示例中解决此问题，我建议您从父元素中删除左右填充，并在您不希望为 100% 宽度的子元素上设置边距。

例如

#container1 {
   padding-top: 5%;
   padding-bottom: 5%;
   padding-left: 0%;
   padding-right: 0%;
}

#container1 label {
    margin-left: 5%;
    margin-right: 5%;
}

演示: http://jsfiddle.net/wb4GU/6/

---

另一种可能的解决方案是将拆分器的宽度扩展到大于 100%，然后根据需要在页面上移动它

#splitter {
    width:110%;
    margin-left: -5%;
}

演示: http://jsfiddle.net/wb4GU/5/