Выровняйте по центру и выровняйте по левому краю параметры <li>в меню - PullRequest
Новая
       6

Выровняйте по центру и выровняйте по левому краю параметры <li>в меню

0 голосов
/ 01 мая 2018

Я работаю над меню, в котором я хочу, чтобы три кнопки были выровнены по левому краю, две вещи выровнены по правому краю и еще одна опция выровнена по центру. В настоящее время я выполняю это, добавляя отступ к центру, выровненному по центру, но мне кажется, что есть лучший способ сделать это. Особенно, когда кто-то использует экран меньшего разрешения, например сотовый телефон.

Вот что у меня есть: 

<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>

Итак, что было бы лучшим способом центрировать это "Имя сотрудника"?

...