Question

更新：对不起因为混乱，我想我无法使用表格，但显然我可以。

我正在尝试找出如何均匀分隔导航中的链接，以便它们之间具有相等的空间。我已经研究了一些，所有的建议建议使用列表或表格，我不能使用（我认为）。

.title {
  float: left;
  font: bold 52px Moon, Arial, Sans-Serif;
  margin-left: 2%;
}
.top {
  background-color: #000;
  color: #fff;
}
@font-face {
  font-family: Moon;
  src: url(https://dl.dropboxusercontent.com/u/105222237/fonts/Moon%20Bold.otf);
}
@font-face {
  font-family: Coco;
  src: url(https://dl.dropboxusercontent.com/u/105222237/fonts/CocoPuff-Regular.ttf);
}
nav a {
  position: relative;
  display: inline-block;
  margin-top: 10px;
  outline: none;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);
  font-size: 1.35em;
  font-family: Coco, Arial;
}
nav a:hover,
nav a:focus {
  outline: none;
}
.cl-effect-4 a {
  padding: 0 0 5px;
}
.cl-effect-4 a::after {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 1px;
  background: #fff;
  content: '';
  opacity: 0;
  -webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;
  -moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s;
  transition: height 0.3s, opacity 0.3s, transform 0.3s;
  -webkit-transform: translateY(-10px);
  -moz-transform: translateY(-10px);
  transform: translateY(-10px);
}
.cl-effect-4 a:hover::after,
.cl-effect-4 a:focus::after {
  height: 5px;
  opacity: 1;
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  transform: translateY(0px);
}
nav {
  float: left
}
body {
  background-color: black;
}

<div class="top">
  <div class="title">
    Codecatek
  </div>
  <nav class="cl-effect-4">
    <a href="">Link</a>
    <a href="">Link</a>
    <a href="">Link</a>
  </nav>
</div>

Answer 1

最简单的方法是使用宽度为100％的表格和td＆＃39; s文本对齐中心。你能解释一下你为什么不能使用它吗？

或者，您*可以*使用以下代码：

＆＃13;

body{background:black;}
nav{
  display:table;
  width:100%;
}

nav > a{
  display: table-cell;
  text-align: center;
  color:white;
  text-decoration:none;
  font-weight:bold;
}

＆＃13;

<html>
  <nav>
    <a href="">TEST</a>
    <a href="">TEST</a>
    <a href="">TEST</a>
  </nav>
</html>

＆＃13;

编辑：您可能希望更改导航的宽度以适合您的网页。

Answer 2

http://jsfiddle.net/c5kcybyd/

我在导航

下为锚链接添加了保证金

nav a {
  position: relative;
  display: inline-block;
  margin-top: 10px;
  outline: none;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);
  font-size: 1.35em;
  font-family: Coco, Arial;
   margin-left:30px;

}

水平对齐链接，使它们在导航中均匀分布

2 个答案: