Question

这就是我想要实现的目标：

所以，我正在谈论“奥普蒂丁根”之后的进入＃39;＆＃39;＆＃39;在＆＃39; AI Opleidingen＆amp; verenigingen＆＃39;＆＃39;

我有什么：

                <ul class="firstNavBar">
                <li><a href="#">Wat is AI</a></li>
                <li><a href="#">De Connectie</a></li>
                <li><a href="#">AI Opleidingen 
                    & verenigingen</a></li>
                <li><a href="#">AI Masters</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
         </nav>

我是HTML和CSS的完整菜鸟，很抱歉，如果我有点模糊。

Answer 1

我想你在问一个换行符。您可以使用<br>标记执行此操作。

Answer 2

您只需添加<br>即可在HTML中创建新的广告/换行符：

＆＃13;

<ul class="firstNavBar">
  <li><a href="#">Wat is AI</a></li>
  <li><a href="#">De Connectie</a></li>
  <li><a href="#">AI Opleidingen<br>
      & verenigingen</a></li>
  <li><a href="#">AI Masters</a></li>
  <li><a href="#">Contact</a></li>
</ul>

＆＃13;

使用CSS的另一个（自动）解决方案可以使用max-width：

＆＃13;

ul li {
  max-width: 100px;
}

＆＃13;

<ul class="firstNavBar">
  <li><a href="#">Wat is AI</a></li>
  <li><a href="#">De Connectie</a></li>
  <li><a href="#">AI Opleidingen & verenigingen</a></li>
  <li><a href="#">AI Masters</a></li>
  <li><a href="#">Contact</a></li>
</ul>

＆＃13;

使用CSS的解决方案：

＆＃13;

.firstnav {
  position:absolute;
  top:75%;
  left:50%;
  margin-left: -500px;
  margin-top:-300px;
}
.firstnav li {
  display:inline-block;
  margin:0 25px;
  vertical-align:top;
} 
.firstnav a {
  text-decoration:none;
  color: #000;  
  font-size:25px; 
  max-width: 10px;
}

＆＃13;

<ul class="firstnav">
  <li><a href="#">Wat is AI</a></li>
  <li><a href="#">De Connectie</a></li>
  <li><a href="#">AI Opleidingen<br> & verenigingen</a></li>
  <li><a href="#">AI Masters</a></li>
  <li><a href="#">Contact</a></li>
</ul>

＆＃13;

Answer 3

您可以指定max-wdith至li：

＆＃13;

ul {
  display:flex;
  list-style:none;
  justify-content:center
}
ul li {
  max-width:150px;
  margin:5px;
  text-align:center;
}

＆＃13;

<ul class="firstNavBar">
  <li><a href="#">Wat is AI</a></li>
  <li><a href="#">De Connectie</a></li>
  <li><a href="#">AI Opleidingen 
                    & verenigingen</a></li>
  <li><a href="#">AI Masters</a></li>
  <li><a href="#">Contact</a></li>
</ul>

＆＃13;

如何在<li>中输入？

3 个答案: