Styling a horizontal nav

Question

Я работаю над этим сайтом, где пользователи могут щелкнуть по теме, и она отображает «стек» цифровых флэш-карт испанского на английский.

У меня есть список категорий vocab (цвета, приветствия, еда и т. Д.). Я хочу отобразить его как горизонтальный список, но когда я меняю дисплей на встроенный, элементы 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> гибким контейнером. И удалите display: inline от <li> s.

как:

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>

Надеется, что это помогает!