CSS选择器：如何使2个跨度填充其父级宽度的50％？

This doesn't works:

这不起作用:

Given an HTML such:

给出这样的HTML:

<body>
<div class="list">
    <span class=" level">hello</span>
    <span class="logic-english">world!</span>
</div>
<div class="list">
    <span class=" level">Or should</span>
    <span class="logic-english">I say....</span>
</div>
<div class="list">
    <span class=" level">something else</span>
    <span class="logic-english">such as...</span>
</div>
<div class="list">
    <span class=" level">Goodbye</span>
    <span class="logic-english">world!</span>
</div>
</body>

a CSS such:

这样的CSS:

body { width: 100%; }
.list { border: 1px solid #333; margin: 3px; }

.list { font-size: 0.8em; min-width: 50% ; display: inline; }
.list:nth-child(4n+3), .list:nth-child(4n+4) { background: #FFAAAA; width: 100%; }

Demo fiddle here.

演示在这里小提琴。

Also, how to make my 2 spans each fill 50% of their parent's width ?

另外,如何让我的2个跨度各占父母宽度的50%?

1 个解决方案

#1

Set the elements to display:inline-block and reduce the width to account for margins. You may want to move to a more fixed width using pixels to make the .list elements take up half the container.

设置要显示的元素:内联块并减小宽度以考虑边距。您可能希望使用像素移动到更固定的宽度,以使.list元素占据容器的一半。

CSS

.list { 
    font-size: 0.8em; 
    min-width: 47% ; 
    display: inline-block; 
}
.list:nth-child(4n+3), .list:nth-child(4n+4) { 
    background: #FFAAAA; 
    width: 47%; 
}

Working Example http://jsfiddle.net/4zddx/11/

工作示例http://jsfiddle.net/4zddx/11/

#1