Как получить 2 элемента div в элементе списка, чтобы использовать доступную ширину на странице?

Question

Как получить 2 элемента div в элементе списка, чтобы использовать доступную ширину на странице?

0

Я хочу, чтобы мой 'settings' 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>

Flo 06 май 2014, в 17:27

Источник

Теги:

html

css

width

html-lists

1 ответ

Ещё вопросы

SW4 · Answer 1 · 2014-05-06T13-15-00.000Z

Демо-скрипт

Во-первых, убедитесь, что ul имеет ширину 100%, затем удалите поплавок и ширину из .profilesettings div.setting и просто дайте ему overflow:hidden;

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