设计水平导航答案

【问题标题】：Styling a horizontal nav设计水平导航
【发布时间】：2023-03-30 14:00:01
【问题描述】：

我在这个网站上工作，用户可以点击一个主题，它会弹出一堆数字西班牙语到英语的闪存卡。

我有词汇类别列表（颜色、问候、食物等）。我想将其显示为水平列表，但是当我将显示更改为内联时，li 元素重叠。我该如何解决？我想让它们永远不会重叠，即使页面宽度发生变化。我尝试添加 margin-top 和 margin-bottom CSS 样式，但这没有任何作用。

这是我的代码：

li {
	display: inline;
	list-style-type: none;
	border: 3px solid black;
	font-size: 20px;
	margin-top: 25px;
	margin-bottom: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-right: 10px;
	padding-left: 10px;
	width: 180px;
	background-color: rgb(0,103,255);
	font-weight: bold;
}

<nav id="subjectlist">
  <ul>
    <li id="subjone">Colors</li>
    <li id="subjtwo">People and Family</li>
    <li id="greetings">Greetings</li>
    <li id="bodyparts">Body Parts</li>
    <li id="food">Food</li>
    <li id="animals">Animals</li>
    <li id="days">Days of the Week</li>
    <li id="months">Months of the Year</li>
    <li id="seasons">Seasons</li>
    <li id="weather">Weather</li>
    <li id="householdobjects">Household Objects</li>
    <li id="clothing">Clothing</li>
    <li id="sports">Sports</li>
  </ul>
</nav>

【问题讨论】：

尝试使用display: inline-block

标签： html css html-lists margin display

【解决方案1】：

您可以在此处使用 CSS Flexbox。只需将您的 <ul> 设为弹性容器即可。并从<li>s 中删除display: inline。

喜欢：

ul {
  display: flex;
  flex-wrap: wrap;
}

看看下面的sn-p：

ul {
  display: flex; /* Flex Container */
  flex-wrap: wrap; /* Wrap to next line */
}

li {
/*   display: inline; */
  list-style-type: none;
  border: 3px solid black;
  font-size: 20px;
  margin-top: 25px;
  margin-bottom: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 10px;
  padding-left: 10px;
  width: 180px;
  background-color: rgb(0,103,255);
  font-weight: bold;
}

<nav id="subjectlist">
            <ul>
                <li id="subjone">Colors</li>
                <li id="subjtwo">People and Family</li>
                <li id="greetings">Greetings</li>
                <li id="bodyparts">Body Parts</li>
                <li id="food">Food</li>
                <li id="animals">Animals</li>
                <li id="days">Days of the Week</li>
                <li id="months">Months of the Year</li>
                <li id="seasons">Seasons</li>
                <li id="weather">Weather</li>
                <li id="householdobjects">Household Objects</li>
                <li id="clothing">Clothing</li>
                <li id="sports">Sports</li>
            </ul>
        </nav>

希望这会有所帮助！

【讨论】：

【解决方案2】：

您必须将您的display 属性设置为inline-block

li {
display: inline-block;
list-style-type: none;
border: 3px solid black;
font-size: 20px;
margin-top: 25px;
margin-bottom: 20px;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;
padding-left: 10px;
width: 180px;
background-color: rgb(0,103,255);
font-weight: bold;
}

 <nav id="subjectlist">
            <ul>
                <li id="subjone">Colors</li>
                <li id="subjtwo">People and Family</li>
                <li id="greetings">Greetings</li>
                <li id="bodyparts">Body Parts</li>
                <li id="food">Food</li>
                <li id="animals">Animals</li>
                <li id="days">Days of the Week</li>
                <li id="months">Months of the Year</li>
                <li id="seasons">Seasons</li>
                <li id="weather">Weather</li>
                <li id="householdobjects">Household Objects</li>
                <li id="clothing">Clothing</li>
                <li id="sports">Sports</li>
            </ul>
        </nav>

【讨论】：