html - 如何在列表元素中获取 2 个 div 元素以使用页面上的可用宽度？

Question

我希望我的“设置”div 使用页面上的可用宽度。有时是 1000px，有时是 780px，有时是 600px。我尝试将宽度设置为 100%，但这导致 div 被放在下一行，而不是我想要的:在“标题”div 旁边。因此，在下面的示例中，带有“性别”的 div 始终为 180 像素宽，但设置 div(值为“男性”)应采用页面上的可用宽度。

我该怎么做？

<style>
.profilesettings {
    padding-left:0px;
    display:inline-block;
}
.profilesettings > li {
    width:100%;
}

.profilesettings li.header {
    border-bottom:1px solid #888;
    margin-bottom:10px;
    margin-top:10px;
    font-weight:bold;
    font-size:14px;
    color:#901C51;
}

.profilesettings div.title {
width:180px;
    float:left;
}

.profilesettings div.title h3 {
    font-weight:normal;
    font-size:12px;
}

.profilesettings div.setting {
width:780px;
    float:left;
    padding-bottom:6px;
}
</style>


<ul class="profilesettings">
    <li class="header"><h2>Details</h2></li>
    <li>
        <div class="title">Gender</div>
        <div class="setting">
            Male
        </div>
    </li>
</ul>   

Answer 1

Demo Fiddle

首先，确保 ul 的宽度为 100%，然后从 .profilesettings div.setting 中移除 float 和宽度，并简单地给它 overflow:隐藏；

html,body, ul{
    width:100%; /* <--- ensure the list is the max width of the page */
    margin:0;
    padding:0;
}
.profilesettings {
    padding-left:0px;
    display:inline-block;
}
.profilesettings > li {
    width:100%;
}
.profilesettings li.header {
    border-bottom:1px solid #888;
    margin-bottom:10px;
    margin-top:10px;
    font-weight:bold;
    font-size:14px;
    color:#901C51;
}
.profilesettings div.title {
    width:180px;
    float:left;
}
.profilesettings div.title h3 {
    font-weight:normal;
    font-size:12px;
}
.profilesettings div.setting {
    overflow:hidden; /* <-- remove float and width and add overflow to force div to take up remaining space */
    padding-bottom:6px;
}