Выровнять в меню параметры <li> по центру и по левому краю
Я работаю над меню, в котором я хочу, чтобы три кнопки были выровнены по левому краю, две вещи выровнены по правому краю, а еще один параметр выровнен по центру. В настоящее время я добиваюсь этого, добавляя отступы к центру, выровненному по центру, но я чувствую, что есть лучший способ сделать это. Особенно, когда кто-то использует экран меньшего разрешения, например сотовый телефон.
Вот что у меня есть на данный момент:
<html>
<head>
<style type = "text/css">
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
text-decoration: none;
}
</style>
</head>
<body>
<body bgcolor = "#71AAE2">
<div align = "center">
<table style = "border-collapse: collapse;" border = "0" width = "1200" cellpadding = "0" bgcolor = "#6699FF">
<tr>
<td width = "800">
<p align = "center">
</td>
</tr>
<tr>
<td width = "800">
<ul>
<li><a href = "index.html" style = "padding:18px 20px">Home</a></li>
<li><a href = "gallery.html" style = "padding:18px 20px">Gallery</a></li>
<li><a href = "contact.html" style = "padding:18px 20px">Contact Us </a></li>
<li style = "float:right"><a href = "http://www.gltdc.net/" target = "_blank" ><img src = "images/GLTDC.png" style = "padding:7px 7px;" width = "80" height = "38"></li>
<li style = "float:right;padding:18px 0px;display: block;color: white;text-align: center;text-decoration: none;">PROUD MEMBER OF THE</li></a>
<center><li style = "display:inline-block;margin-left: 24%;"><a href = "Internal/index.html" style = "padding:18px 20px">Employee Login</a></li></center>
</ul>
</td>
</tr>
</table>
</div>
</body>
</html>
Итак, как лучше всего сконцентрировать этот «Логин сотрудника»?
Вам лучше объединить стили CSS вместе и сделать их более организованными. Затем, если вы хотите расположить элементы на панели навигации, подумайте о «гибкой компоновке ящиков». Попробуйте добавить display: flex; justify-content: space-around; в свой стиль ul, затем проверьте связанная страница в Mozilla, чтобы найти дополнительные свойства, которые вам нужны.
Также не рекомендуется использовать столы для разметки .. и center является устаревшим элементом и больше не должен использоваться.
У вас есть недопустимый html (около четвертого элемента списка), поэтому вы, вероятно, захотите сначала исправить это. И это для электронной почты или типа того? Вы используете довольно старый синтаксис.