Имейте Navbar <div>
, внутри - <ul>
, и каждый <li>
содержит <a>
со ссылкой (это для панели навигации)
Я посмотрел на Google и этот сайт, и я не смог найти именно то, что искал.
Я хочу сохранить текущий стиль (используя <li>
с <a>
внутри), и я хочу, чтобы <li>
был равномерно распределен и центрирован (эта часть приходит естественно, если они распределены равномерно...) внутри <ul>
(который находится внутри навигационной панели <div>
).
В любом случае, если это не имеет смысла, дайте мне знать, в настоящее время они только что выровнены по левому краю... Вот что у меня есть:
HTML:
<div class="navbar">
<ul>
<li><a href="Home">Home</a></li>
<li><a href="Discounts">Discounts</a></li>
<li><a href="Contact">Contact Us</a></li>
<li><a href="About">About Us</a></li>
</ul>
</div>
CSS
.navbar {
width: 100%;
margin-left: auto ;
margin-right: auto ;
background-color: #ABCDEF;
}
.navbar ul {
list-style-type: none; /*to remove bullets*/
text-align: center;
margin: 0px;
padding: 0px;
width: 90%;
overflow: hidden;
}
.navbar li{
float: left;
padding: 2px;
width: 150px;
margin-left: auto ;
margin-right: auto ;
}
Я также могу включить мой .navbar a {}, если это необходимо. Я очень новичок в CSS, так что делайте это легко, также я все посмотрел на SO и Google и не смог найти ничего подобного (хотя, возможно, с тех пор, как я новичок, я не понимаю его того же).
Если это ошибочный метод CSS и/или есть гораздо более простой, более распространенный способ сделать это. Идите дальше и свяжите/опубликуйте это, но я предпочел бы это, потому что это имеет для меня большую ценность.
Спасибо