造型横向导航

Question

我正在这个网站上工作，用户可以点击一个主题，它带来了数字西班牙语到英语闪存卡的“堆栈”。

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

这里是我的代码：

li { 
 
\t display: inline; 
 
\t list-style-type: none; 
 
\t border: 3px solid black; 
 
\t font-size: 20px; 
 
\t margin-top: 25px; 
 
\t margin-bottom: 20px; 
 
\t padding-top: 10px; 
 
\t padding-bottom: 10px; 
 
\t padding-right: 10px; 
 
\t padding-left: 10px; 
 
\t width: 180px; 
 
\t background-color: rgb(0,103,255); 
 
\t 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>

Answer 1

你必须让你的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>

Answer 2

您可以在这里使用CSS Flexbox。只需让您的<ul>为柔性容器。并从<li> s中删除display: inline。

，如：

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

看一看下面的代码片段：

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>

希望这有助于！