Процентная ширина CSS не работает

Я пытаюсь редактировать CSS для навигационной панели своего сайта, чтобы преобразовать ее с фиксированными значениями ширины и высоты в процентные значения (чтобы он стал отзывчивым и работал лучше с другого экрана размеры). Тем не менее, когда я преобразовал значения, отдельные divs не были правильно отсортированы.Процентная ширина CSS не работает

Возможно, что-то очень простое, что я пропустил здесь (видя, что я любитель самообучения в CSS и HTML), но я не мог найти здесь никаких решений.

Это JSfiddle моей Naviation бар с помощью пикс, работает должным образом

Это JSfiddle его после преобразования в процентных значений для ширины.

Соответствующий код (после преобразования):

HTML:

<body> 
<div id="container"> 
    <div id="menuwrap"> 
     <ul id="menu"> 
     <li id="one"><a href="#"><h class="navbartext">one</h></a></li> 
     <li id="two"><a href="#"><h class="navbartext">two</h></a></li> 
     <li id="three"><a href="#"><h class="navbartext">three</h></a></li> 
     <li id="four"><a href="#"><h class="navbartext">four</h></a></li> 
     <li id="five"><a href="#"><h class="navbartext">five</h></a></li> 
     <li id="six"><a href="#"><h class="navbartext">six</h></a></li> 
     <li id="seven"><a href="#"></a></li> 
     </ul> 
    </div> 
</div> 
</body>

CSS:

#container { 
    width:100%; 
    height:25px; 
    margin:0 auto; 
    background:#fff; 
} 

#menuwrap { 
    height:25px; 
    width:100% 
    position:relative; 
    top:25px; 
    background:#fff; 
} 

ul#menu { 
    height:25px; 
    float:right; 
    margin:0; 
    padding:0; 
    list-style-type:none; 
    background:#44546A; 
} 

ul#menu li { 
    float:left; 
} 

ul#menu li a { 
    display: block; 
    width: auto; 
    height:25px; 
    overflow:hidden; 
    text-indent:10px; 
    background:#000; 
    color:#000; 
} 

ul#menu li#one a { 
    width:16.6%; 
    text-align:center; 
    vertical-align: middle; 
} 

ul#menu li#two a { 
    width:16.6%; 
    text-align:center; 
    vertical-align: middle; 
} 

ul#menu li#three a { 
    width:16.6%; 
    text-align:center; 
    vertical-align: middle; 
} 

ul#menu li#four a { 
    width:16.6%; 
    text-align:center; 
    vertical-align: middle; 
} 

ul#menu li#five a { 
    width:16.6%; 
    text-align:center; 
    vertical-align: middle; 
} 

ul#menu li#six a { 
    width:17%; 
    text-align:center; 
    vertical-align: middle; 
} 

ul#menu li#seven a { 
    width: 49px; 
    height: 49px; 
    -webkit-border-radius: 25px; 
    -moz-border-radius: 25px; 
    border-radius: 25px; 
    background-color:#000; 
    border-style: solid; 
    border-width: 1px; 
    border-color: #fff; 
    position:relative; 
    top: -17.5px; 
    left:88%; 
    z-index:2; 
} 

ul#menu li class.a 
{ 
width:208px; 
margin:0px; 
}

источник

2015-06-21 Elliott Welsford

Добавить width: 100%; в ul#menu.

Проверьте здесь: https://jsfiddle.net/vjhz7o8y/5/.

Кроме того, избегайте использования одного и того же id для нескольких элементов, вместо этого используйте class.

ul#menu { 
    height:25px; 
    width:100%; 
    float:right; 
    margin:0; 
    padding:0; 
    list-style-type:none; 
    background:#44546A; 
}

источник

2015-06-21 21:23:15 TheOnlyError

Добавление этого не полностью устраняет мою проблему, поскольку ссылки на панели навигации все еще не расширяются до их правильных частей (приблизительно (100/6)% каждый). Кроме того, какие элементы я использовал вместо класса? Спасибо. –

Вы использовали четыре круга с одинаковым идентификатором 'circle'. Вы хотите, чтобы круг отображался в крайнем левом углу? – TheOnlyError

У вас есть решение, проверьте его [здесь] (https://jsfiddle.net/vjhz7o8y/6/) – TheOnlyError

Моя книга по веб-дизайну, HTML5 и CSS3 от Murach в третьем издании говорит о том, чтобы использовать slickNav для отзывчивого меню. Это плагин Javascript. Также, я только что исправил свою проблему. Я пытался пометить блокированные элементы, когда я должен был подбирать их контейнеры . Вот пример кода

nav {width:100%;} 

nav #nav_menu { 
    list-style-type: none; 
    padding: 0%; 
    margin: 0%; 
} 

#nav_menu > li { 
    float: left; 
    width:20%; 
    max-width: 190px; 
}

Надеюсь, что это поможет.

источник

2017-07-04 15:58:09

Процентная ширина CSS не работает

ответ

Смежные вопросы