Question

我正在这个网站上工作，用户可以点击某个主题，它会显示一个＆＃34;堆栈＆＃34;数字西班牙语到英语闪存卡。

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

这是我的代码：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

＆＃13;

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;
}

＆＃13;

 <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>

＆＃13;

Answer 2

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

像：

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

请看下面的代码段：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

希望这有帮助！

造型水平导航

2 个答案: