我希望我的“设置”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>
最佳答案
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;
}
关于html - 如何在列表元素中获取 2 个 div 元素以使用页面上的可用宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23497565/