Question

因此，我正在尝试复制以下网站模板：link

我想像上面的链接中那样使列表项水平放置，但是它不适用于display:inline block，这是我从Google和这个论坛上看到的，我也尝试使用{{1} }我尝试了几种搜索方法，包括使用float.，但是它也不起作用。这可能是我忽略的一个愚蠢错误，但我似乎找不到解决方法。

HTML：

table

CSS：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="test.css" />
  <title>title</title>
</head>

<body>
  <div class="header">
    <a href="https://freewebsitetemplates.com/preview/rehabilitation-yoga/index.html">
      <h1>Belle & Carrie</h1>
    </a>
    <span>rehabilitation yoga
    </span>
  </div>

  <ul class="listHorizontal">
    <li>Home</li>
    <li>About</li>
    <li>Contact Us</li>
    <li></li>
  </ul>




</body>

</html>

Answer 1

您可以通过以下方式进行操作：

body {
  background: #077054;
  color: #315f52;
}

.header {
  text-align: center;
}
.header a {
  text-decoration: none;
  color: #99fa99;
  font-size: 20px;
  font-weight:normal;
  font-family: "latoregular";
}
.header span {
  color: #b6d8cf;
  font-size: 26px;
  text-transform: uppercase;
  font-family: 'nixie_oneregular';

}

.listHorizontal {
  display: flex;
  justify-content: space-around;
  color: #b6d8cf;
  font-size:30px;
  text-transform: uppercase;
  list-style: none;
}

   <div class="header">
    <a href="https://freewebsitetemplates.com/preview/rehabilitation-yoga/index.html">
      <h1>Belle & Carrie</h1>
    </a>
    <span>rehabilitation yoga
    </span>
  </div>

  <ul class="listHorizontal">
    <li>Home</li>
    <li>About</li>
    <li>Contact Us</li>
    <li></li>
  </ul>

Answer 2

如果使用display:flex，则这些项目将水平对齐。然后，您可以将更多样式应用于容器或子容器，以将内容推送到周围。

Flexbox

body {
  background: #077054;
  color: #315f52;
}

.header {
  text-align: center;
}
.header a {
  text-decoration: none;
  color: #99fa99;
  font-size: 20px;
  font-weight:normal;
  font-family: "latoregular";
}
.header span {
  color: #b6d8cf;
  font-size: 26px;
  text-transform: uppercase;
  font-family: 'nixie_oneregular';
}

.listHorizontal {
  color: #b6d8cf;
  font-size:30px;
  padding:0;
  text-transform: uppercase;
  list-style-type: none;
  display:flex;
  justify-content:space-evenly;
}

<div class="header">
    <a href="https://freewebsitetemplates.com/preview/rehabilitation-yoga/index.html">
      <h1>Belle & Carrie</h1>
    </a>
    <span>rehabilitation yoga
    </span>
  </div>

  <ul class="listHorizontal">
    <li>Home</li>
    <li>About</li>
    <li>Contact Us</li>
    <li>Test</li>
  </ul>

Answer 3

添加此CSS，它将起作用

.listHorizontal li {
    display: inline;
}

Answer 4

.listHorizontal li {
  display: inline-block;
}

CSS列表-水平

4 个答案: