css – div宽度100%10px:相对于父母?

前端之家收集整理的这篇文章主要介绍了css – div宽度100%10px:相对于父母?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个带显示的ul / li菜单:table / table-cell:自动布局,拉伸以填充容器并在菜单项之间分配水平空间.我必须将一个额外的UI元素与最后一个菜单项对齐.我可以通过将该元素添加为最后一个li元素的子元素并使其100%宽度来实现此目的.

但是,我需要将此UI元素(语言选择器)部分放在主要内容之外,因此我将其置于相对右侧:-10px.但副作用是选择器的左边缘与菜单元素相比向右移动.通常我会将选择器div的宽度增加10px,但由于它是100%,我不能这样做.父李的宽度由其文本内容决定.

有没有办法使用纯css来做到这一点?我无法在选择器上添加填充,因为我需要其子内容来填充整个div.

<div class="menu">
    <ul>
        <li><a href="#">first</a>
        </li>
        <li><a href="#">second</a>
            <div id="selector">
                <a href="#">EN</a>
                <a href="#">FR</a>
            </div>
        </li>
    </ul>
</div>

这是一个有效的例子:
http://jsfiddle.net/hJXng/13/

任何帮助表示赞赏.

解决方法

根据您要支持的浏览器,一个简单的选项是使用 calc
width: calc(100% + 10px);

另见:Can I use calc()
示例:http://jsfiddle.net/hJXng/19/

猜你在找的CSS相关文章