Question

我的列表现在从左到右阅读而不是逐行阅读但是现在如何将这些单词分开，因为它们太靠近了？我试图在文本之间留出空间并尝试进行文字间距，但它不会改变任何东西。我尝试在#menu id和li {}里面做单词间距，但它仍然没有用。

<body>
    <div id="container">
        <div id="nav"></div>
        <img src="...">
        <h1>IndieForwardMusic</h1>

        <ul id="menu">
            <li>Home</li>
            <li>About</li>
            <li><a href="..."</a></li>
            <li>Contact</li>
        </ul>

    </div>
</body>



#menu {
  position: absolute;
  list-style-type: none;
  margin: 0;
  color: white;
  font-size: 38px;
  top: 10px;
}

li{
  float: left;
  word-spacing: 30px;
}

Answer 1

设置一些余量。

#menu li {
margin:0 20px;
}

Answer 2

不要使用word-spacing，因为每个li只有一个字。如果要空格li，请使用以下CSS

li {
    margin-left: 30px;
    margin-right: 30px;
}

为什么指定的字间距不起作用？

2 个答案: