Question

我知道在html中使用表格作为布局的一部分是不好的做法，因此想知道如何使用<ul>元素而不是表格来查看here示例的样式。所有间距和字体大小都需要保持不变。

非常感谢任何帮助。

Answer 1

我就是这样做的：

（我们的想法是使用box-sizing属性，以便能够安全地设置width: 25%。）

HTML：

<ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Contact</a></li>
</ul>

CSS：

#nav {
    font-size: 20px;
}

#nav li {
    border-left: 1px solid #C3C3C3;
    float: left;
    width: 25%;
    text-align: center;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#nav li:first-child {
    border: none;
}

#nav a {
    display: block;
    color: inherit;
    text-decoration: none;
}

现场演示： http://jsfiddle.net/dLBYe/8/

Answer 2

此示例如何（无需JavaScript）： jsFiddle

HTML：

<ul>
    <li onclick="window.location.href='#';">Home</li>
    <li onclick="window.location.href='#';">About</li>
    <li onclick="window.location.href='#';">Gallery</li>
    <li onclick="window.location.href='#';" style="border:none">Contact</li>
</ul>

CSS：

body {
    padding:0;
    margin:0;
}
ul {
    display:inline;
    font: 20px Arial, sans-serif;
}

li {
    float:left;
    width:24%;
    text-align:center;
    border-right: 1px solid #c3c3c3;
    list-style:none;
    cursor:pointer;
}

顺便说一句，你在CSS中发现了一个小错误，我在jsFiddle中修正了这个字体。

Answer 3

现场演示：http://jsfiddle.net/dLBYe/9/

HTML：

<ul class="navbar">
    <li onclick="window.location.href='#'">Home</li>
    <li onclick="window.location.href='#'">About</li>
    <li onclick="window.location.href='#'">Gallery</li>
    <li onclick="window.location.href='#'">Contact</li>
</ul>

CSS：

.navbar {
    width: 100%;
    font: 20px, Arial, sans-serif;
}

.navbar > li {
    width: 25%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    border-left: 1px solid #C3C3C3;
    cursor: pointer;
    text-align: center;
}

.navbar > li:first-child {
    border: none;
}

.navbar:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

Answer 4

如下所示，我知道有两种方式。

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

你可以使用左/右浮动

li {
    float: left; /* or right */
}

或显示内联/内联块（n.b。这种方式导致有问题的大小调整）

li {
    display: inline; /* or inline-block */
}

您可以更改填充/边距/宽度以适应demo

修改：不使用边框尺寸demo

的完整示例

ul {
    display: block;
    width: 100%;
}

li {
    border-left: solid 1px black;
    float: left;
    margin-right: -1px;
    text-align: center;
    width: 25%;
}

ul li:first-child {
    border-left: none;
}

ul li:last-child {
    margin-right: 0;
}

使用display: table的示例现在是我知道实现此效果的第三种方式:-) demo

ul {
    display: table;
    width: 100%;
}

ul li:first-child {
    border-left: none;
}

li {
    display: table-cell;
    border-left: solid 1px black;
    text-align: center;
    width: 25%;
}

导航栏<ul>而不是表</ul>

4 个答案: