Блог

Главная - Вопросы по программированию - Горизонтальный UL с использованием CSS Grid

Горизонтальный UL с использованием CSS Grid

#html #css

#HTML #css

Вопрос:

Пытаюсь сделать мой UL горизонтальным, одновременно используя CSS Grid. У меня в основном есть два столбца, которые занимают всю страницу, а во втором (справа) Я хочу, чтобы мой UL отображался горизонтально. Я пробовал как display: block, так и inline, и, похоже, ни один из них не дает желаемого эффекта.

Есть идеи? Я устранил все свои тесты в css, поэтому в настоящее время нет ссылки на ul HTML

 #nav-bar {
  display: grid;
  grid-template-columns: 50% 50%;
  background-color: #3e2723;
  padding: 10px;
  border-radius: 10px;
}

#header-img {
  object-fit: cover;
  width: 70%;
  max-height: 100%;
  float: left;
}  
 <header>
  <nav id="nav-bar">
    <div class="image">
      <img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="logo"><!--U.S.2-->
    </div>
    <div class="links">
      <ul>
        <li><a class="nav-link" href="#features">Features</a></li><!--U.S.4, 5-->
        <li><a class="nav-link" href="#video">Video</a></li><!--U.S.4, 5-->
        <li><a class="nav-link" href="#pricing">Pricing</a></li><!--U.S.4, 5-->
      </ul>
    </div>
  </nav>
</header>

Ответ №1:

Вы должны добавить код к элементам списка ( li ). Добавление встроенного отображения в список ( ul ) не сильно изменится.

Ваша проблема в основном не имеет ничего общего с CSS Grid, поскольку вы не используете grid непосредственно в списке.

Также есть много способов сделать это, используя display: inline , display: inline-block , используя flexbox или даже grid .

Решение с использованием display: inline или display: inline-block 

 #nav-bar {
  display: grid;
  grid-template-columns: 50% 50%;
  background-color: #eee;
  padding: 10px;
  border-radius: 10px;
}

#header-img {
  object-fit: cover;
  width: 70%;
  max-height: 100%;
  float: left;
}

ul li {
  display: inline;
}  
 <header>
  <nav id="nav-bar">
    <div class="image">
      <img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="logo"><!--U.S.2-->
    </div>
    <div class="links">
      <ul>
        <li><a class="nav-link" href="#features">Features</a></li><!--U.S.4, 5-->
        <li><a class="nav-link" href="#video">Video</a></li><!--U.S.4, 5-->
        <li><a class="nav-link" href="#pricing">Pricing</a></li><!--U.S.4, 5-->
      </ul>
    </div>
  </nav>
</header>

Решение с использованием display: flex 

 #nav-bar {
  display: grid;
  grid-template-columns: 50% 50%;
  background-color: #eee;
  padding: 10px;
  border-radius: 10px;
}

#header-img {
  object-fit: cover;
  width: 70%;
  max-height: 100%;
  float: left;
}

ul {
  display: flex;
}  
 <header>
  <nav id="nav-bar">
    <div class="image">
      <img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="logo"><!--U.S.2-->
    </div>
    <div class="links">
      <ul>
        <li><a class="nav-link" href="#features">Features</a></li><!--U.S.4, 5-->
        <li><a class="nav-link" href="#video">Video</a></li><!--U.S.4, 5-->
        <li><a class="nav-link" href="#pricing">Pricing</a></li><!--U.S.4, 5-->
      </ul>
    </div>
  </nav>
</header>

Решение с использованием display: grid

(Один из способов сделать это)

 #nav-bar {
  display: grid;
  grid-template-columns: 50% 50%;
  background-color: #eee;
  padding: 10px;
  border-radius: 10px;
}

#header-img {
  object-fit: cover;
  width: 70%;
  max-height: 100%;
  float: left;
}

ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}  
 <header>
  <nav id="nav-bar">
    <div class="image">
      <img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="logo"><!--U.S.2-->
    </div>
    <div class="links">
      <ul>
        <li><a class="nav-link" href="#features">Features</a></li><!--U.S.4, 5-->
        <li><a class="nav-link" href="#video">Video</a></li><!--U.S.4, 5-->
        <li><a class="nav-link" href="#pricing">Pricing</a></li><!--U.S.4, 5-->
      </ul>
    </div>
  </nav>
</header>

Ответ №2:

чтобы <li> элементы в <ul> отображались горизонтально, вы можете просто добавить следующее в CSS, создав <li> элементы в display:inline-block или display:inline :

 li{
  display: inline-block;
}