проблема размера встроенного списка - PullRequest
Новая
       18

проблема размера встроенного списка

0 голосов
/ 11 августа 2010

Я использую inline-block list в качестве горизонтальной панели навигации с выпадающими меню. Но я не могу заставить его заполнить всю ширину экрана. Чтобы сделать его более разочаровывающим, когда я изменяю уровень масштабирования экрана браузера, размер списка изменяется с другой скоростью. Таким образом, на некоторых масштабах он слишком длинный и переносится на следующую строку, а на других уровнях масштабирования он слишком мал и не занимает все пространство. Он делает то же самое в Firefox и т. Д.

Мой css-файл: 

#topNavBar{  
    margin:0px;  
    padding:0px;  
    list-style:none;  
    width:100%;  
    line-height:45px;  
    float:left;  
    clear:both;  
    display:inline-block;  
}  
#topNavBar > li {
    background:#141414 none repeat scroll 0 0;
    cursor:pointer;
    float:left;
    position:relative;
    padding:0px 10px;
    display:inline-block;
}
#topNavBar .tabs {
    text-align:center;
    display:inline-block;
    white-space:nowrap;
}

И тогда мой HTML-файл является более сложной версией чего-то вроде: 

<ul id="topNavBar">
    <li class="tabs">blah1</li>
    <li class="tabs">blah2</li>
    <li class="tabs">blah3</li>
</ul>

1 Ответ

0 голосов
/ 12 августа 2010

Трудно позвонить, не увидев весь код и не увидев живой пример, но вот мои идеи, основанные на предоставленной вами информации:

Попробуйте избавиться от float: left;на #topNavBar, если вы хотите, чтобы он занимал всю ширину, не должно быть никаких причин для float.Кроме того, попробуйте изменить #topNavBar на фиксированную ширину в px, а не на %, и я бы не стал устанавливать #topNavBar на display: inline-block;, просто оставьте его как display: block;.

...