Question

我正在制作一个菜单，我希望其中三个按钮对齐到左边，两个对齐在右边，另一个选项在中间对齐。我目前正在通过向中心对齐添加填充来实现这一点，但我觉得有更好的方法来做到这一点。特别是当有人使用较小分辨率的屏幕时，例如手机。

这是我到目前为止所做的：

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

那么以“员工登录”为中心的最佳方式是什么？

在菜单中居中并左对齐<li>选项

0 个答案: