CSS 对内联调整两个框的大小持怀疑态度

Question

我正在尝试制作两个用于放置图表的框，我希望它们在整个页面宽度上具有相同的宽度，并在我调整页面大小时自动调整大小:

<style>
#middle_row_contents li {
    display: inline-block;
    list-style-type: none;
    padding-right: 2em;
    *display: inline;
}
</style>
<div class="middle_row_box">
<ul id="middle_row_contents">
    <li>
        <div class="hours_rooms_used">
            <div><h3>Meeting hours per room</h3><select id="years_rooms_used"></select></div>
            <div class="tab_rooms_used"><canvas id="chart_rooms_used"></canvas></div>
        </div>
    </li>
    <li>
        <div class="hours_per_customer">
            <div><h3>Meeting hours per customer</h3><select id="years_rooms_customer"></select></div>
            <div class="tab_rooms_customer"><canvas id="chart_per_customer"></canvas></div>
        </div>
    </li>
</ul>
</div>

我试着把 width: 50%;在

和 assing width: 100% on middle_row_box 的 div 上，但它没有用...我怎么能这样做？如果我将两个元素(如 a 和 a)放在 a 中，它们不应该并排出现吗？因为在我的例子中看起来像是在新的一行中？

干杯，路易吉

Answer 1

您还需要将 width 设置为 LI。他们应该如何知道您想要调整它们的大小？

#middle_row_contents {margin: 0; padding: 0;}

#middle_row_contents li {
    display: inline-block;
    list-style-type: none;
    padding-right: 2%; /* ems and % aren't compatible, use the same units */
    *display: inline;
    width: 47%; /* lower than 48% because of a white-space gap between inline-block elements. Use float to avoid this gap. */
    background: red;
}

http://jsfiddle.net/x98g7c3k/