分隔符在HTML5中不占100％ [英] Separator not occupying 100% in HTML5

问题描述

分隔符不占用容器的100％区域。在日期和播放的数字之间，分隔符的右侧和左侧不应有任何空格。有什么解决方案吗？小提琴

Separator is not occupying 100% area of the container. There should not be any space on the rightand left to the separator between date and played numbers. Any solution for this please?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;
            }`

推荐答案

父容器填充是设置为5％，因此子元素只能扩展到填充允许的范围。

The parent containers padding is set to 5% so the child element can only expand as much as the padding will allow.

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

To resolve this in your example I suggest you remove the left and right padding from the parent and set margins on the child elements you do not want to be 100% width.

例如

#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％，然后根据需要在页面上移动

Another potential solution is to expand the splitter to have a width greater than 100% and then shift it across the page as necessary

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

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

这篇关于分隔符在HTML5中不占100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！