2

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

           `<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;
            }`
4

3 回答 3

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/

于 2013-09-05T14:13:08.563 回答
0

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

从#container1 中删除：

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

或者，如果您希望 'Date:' 和 'Played Numbers' 在同一位置，请将 #splitter 中的宽度更改为：

width: 110%;
于 2013-09-05T14:10:40.687 回答
0

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

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

这应该工作

于 2013-09-05T14:14:28.487 回答