CSS对内联调整两个框的大小表示怀疑

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

<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>

#中排内容李{
显示：内联块；
列表样式类型：无；
右侧填充：2米；
*显示：内联；
}


每个房间的会议时间


每位客户的会议时间

我试着把宽度：50%；在

和assing width两个方面：中排盒子的div为100%，但它不起作用……我怎么能做到？如果我把两个元素像和放在a里面，它们不应该并排出现吗，因为在我的例子中，它们看起来像是在一个新的行中

干杯，

---

Luigi

您也需要将

宽度设置为
LI
s。他们怎么知道你想调整他们的尺寸

#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;
}

试试这个javascript代码片段

document.getElementById("hoursd_per_customers").style.width = (document.getElementById("hours_rooms_used").clientWidth - 10) + "px";

希望它能起作用

但它不起作用。
就像发生了什么？你能把你的代码放到JSFIDLE中吗？请更具体一些。到底是什么问题？出了什么问题？哪两个元素需要并排？另外，您为什么要为此使用
？