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％宽度。

e.g。

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

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

DEMO： http://jsfiddle.net/wb4GU/6/

另一个可能的解决方案是将分割器扩展为宽度大于100％，然后根据需要在页面上移动

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

DEMO： http://jsfiddle.net/wb4GU/5/

Answer 2

这是因为拆分器位于容器div中，容器左右有填充。

从＃container1中删除：

padding-left: 5%;
padding-right: 5%;

或者，如果您希望“日期：”和“播放数字”位于相同位置，请将#splitter中的宽度更改为：

width: 110%;

Answer 3

http://jsfiddle.net/wb4GU/2/

width:110%;
margin-left: -5%;

这应该有效

分隔符在HTML5中不占100％

3 个答案: