Как я могу получить все элементы списка равной ширине?

Я хочу, чтобы моя панель навигации была равной ширины для каждого элемента ul. я уже пробовал Width:100% для ul.navbar a и ul.navbar li. JSfiddle: http://jsfiddle.net/HeyItsProdigy/a2zVr/Как я могу получить все элементы списка равной ширине?

CSS:

@charset "utf-8"; 
/* Elements */ 

body { 
    margin:0; 
    padding:0; 
    background-image:url(main%20bg.jpg) 
} 

ul { 
    padding:0; 
    margin:0; 
} 

/* End of elements */ 




/* Id's */ 

#container { 
    margin-left:auto; 
    margin-right:auto; 
    width:1000px; 
} 

#body { 
    border:5px solid #CF0; 
    width:1000px; 
    height:1000px; 
    background-image:url(middle%20bg.png); 
} 

#navbar { 
    position:relative; 
    top:12px; 
    text-align:center 
} 

/* End of is's */ 




/* Classes */ 

.navbar { 
    list-style:none; 
} 

ul.navbar li { 
    display:inline; 
    margin:0; 
    padding:0px; 
    text-align:center; 
} 

ul.navbar a { 
    background-color:#00CCFF; 
    padding:10px; 
    margin:0px; 
    text-decoration:none; 
    color:#CF0; 
    border-radius:100px; 
    border:2px solid white; 
} 

ul.navbar a:hover { 
    background-color:#00FFFF; 
    padding:10px; 
    margin:0px; 
} 

/* End of classes */

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

<link rel="stylesheet" type="text/css" href="style.css" /> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Home</title> 

<script> 
<!-- 



//--> 
</script> 

</head> 

<body> 
<div id="container"> 
    <div id="body"> 
     <div id="navbar"> 
      <ul class="navbar"> 
       <li><a href="index.html">Blog</a></li><li><a href="index.html">Photos</a></li><li><a href="index.html">Home</a></li><li><a href="index.html">Videos</a></li><li><a href="index.html">About</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 
</body> 
</html>

источник

2013-08-07 Anonymous

Я lol'd ... эти теги смешно на самом деле. –

Установите внутренние якоря, как

ul.navbar a { 
    display: inline-block; 
    width: 80px; 
}

Установить ширину достаточно долго для вашего контента.

http://jsfiddle.net/vrFx7/1/

источник

2013-08-07 13:09:44

Я хотел бы знать, есть ли способ (теперь в 2017 году), чтобы сделать их равными, не догадываясь о «достаточно длинном» значении? Например. для типовых шаблонов. – user3125367

@ user3125367 Для этого, я думаю, вам нужно будет использовать [flexboxes] (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes). Вот [упрощенная демонстрация] (https://jsfiddle.net/koe1e0p0/). –

Удалить display:inline из вашего <li>. Это заставляет его действовать как встроенный элемент (например, <a>, <span> и т. Д. И т. Д.).

Кстати, причина, по которой width:100% на вашем <li> не работала, заключается в том, что встроенные элементы не могут принимать ширину. Если бы вы хотели, чтобы он был встроен, но также имел ширину, вам нужно было бы использовать display:inline-block. Если вы хотите, чтобы ваши 5 пунктов выстраиваться то вы будете использовать:

ul.navbar li { 
    display: inline-block; 
    width: 20%; 
    … 
}

Вы должны были бы убедиться, что нет никаких пробелов между элементами списка в HTML, как и сами будет занимать пространство, когда все ваши Элементы: display:inline или display:inline-block. Более пуленепробиваемый метод заключается в том, чтобы поместить их влево, но у этого есть свой набор проблем.

источник

2013-08-07 12:57:31

Это не сработает, потому что я хочу, чтобы он отображал встроенную строку вверх и вниз. –

О, хорошо. В этом случае у вас есть 5 элементов списка, поэтому лучше всего дать им «display: inline-block» и «width: 20%». Я отредактирую свой ответ. –

Я сделал несколько изменений в вашу скрипку. Вы можете найти его here. Надеюсь, это может быть ответом вашей проблемы.

Я изменил свой CSS, как показано ниже:

ul.navbar li { 
    display:inline; 
    margin:0; 
    padding:0px; 
    text-align:center; 
    padding: 10px; 
} 
ul.navbar a { 
    background-color:#00CCFF; 
    border-radius:100px; 
    margin: 0 10px; 
    min-width: 75px; 
    padding:10px; 
    float:left; 
    text-decoration:none; 
    color:#CF0; 
    display:block; 
}

источник

2013-08-07 13:13:21 V15HM4Y

Как я могу получить все элементы списка равной ширине?

ответ

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