Элемент списка стилей в HTML

ProgramBox

Элемент списка стилей в HTML

Post author:admin
Запись опубликована:20 января, 2022
Post category:Вопросы по программированию

#html #css

Вопрос:

Я написал следующий HTML-код :
Моя основная задача — выровнять элементы списка — HOME | All About Kittens | Feeding Your Kitten
должным образом. В настоящее время он отображается в виде простого списка. Я хочу, чтобы это было похоже :

Здесь элементы списка-это Дом, магазин и коллекции, и они выровнены по горизонтали
, плюс, когда вы наводите курсор на элемент, он меняет цвет, и под ним появляется строка
. Любые идеи, как мне реализовать этот способ

 a {
  color: black;
  text-decoration: none;
}
.promo_banner {
  background-color: #333;
  text-align: center;
  color: #fff;
  font-size: 12px;
  position: relative;
  width: 100%;
  z-index: 5000;
  top: 0;
  overflow: hidden;
}
div.logo img {
  max-width: 205px;
  width: 100%;
  margin: 0 auto;
  display: block;
  max-width: 100%;
  height: auto;
}

 <html>
  <head>
    <link rel="stylesheet" href="home.css" />
  </head>
  <div class="promo_banner">
    <div class="promo_banner__content">
      <p>
        <strong>Our Guide on Caring for Your Furry Feline Friend</strong>
      </p>
    </div>
    <div class="promo_banner-close"></div>
  </div>
  <div class="top_bar clearfix">
    <ul class="social_icons">
      <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
        integrity="sha512-iBBXm8fW90 nuLcSKlbmrPcLa0OT92xO1BIsZ ywDWZCvqsWgccV3gFoRBv0z 8dLJgyAHIhR35VZc2oM/gI1w=="
        crossorigin="anonymous"
        referrerpolicy="no-referrer"
      />

      <div class="container">
        <span><a href="https://www.twitter.com"><i class="fab fa-twitter"></i><a href="https://www.twitter.com"></a></span>
        <span><i class="fab fa-facebook-f"></i></span>
        <span><i class="fab fa-youtube"></i></span>
        <span><i class="fab fa-instagram"></i></span>
      </div>
    </ul>
  </div>

  <div class="logo text-align--center">
    <a href="https://store.linefriends.com" title="LINE FRIENDS INC">
      <img
        src="logo.jpeg"
        class="primary_logo lazyloaded"
        alt="LINE FRIENDS INC"
    /></a>
  </div>
  <div class="nav">
    <ul class="menu center">
      <li >
      <span>HOME</span>
       </li>  
       <li >
        <span>All About Kittens</span>
         </li>  
         <li >
          <span>Feeding Your Kitten</span>
           </li>  
      </ul>
    </ul>
  </div>
</html>

Это тот самый logo.jpeg Я использую в HTML.
Я хотел сделать так, чтобы элементы строки изображения отображались посередине

Ответ №1:

Вы можете использовать display: flex; для отображения навигации, подобной упомянутому вами пользовательскому интерфейсу.

Вот демонстрационная версия: https://codepen.io/shubhamp-developer/pen/gOmmxOg

 .nav .menu{
  display: flex;
  list-style: none;
}

Предварительный просмотр:

Чтобы узнать больше о display flex, я бы предпочел перейти по этой очень полезной ссылке: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

1. Большое спасибо!. Мне нужна еще одна небольшая помощь, не уверен, стоит ли мне открывать новый вопрос. В logo.jpeg файл, который у меня есть на моем локальном ноутбуке, занимает всю горизонтальную длину. В то время как это должно быть посередине. Не знаю, как его выровнять. Я прилагаю скриншот для этого.

2. Я обновил код с Intro To Kittens изображением. Который должен выглядеть как Line Friends в середине

3. Также при наведении курсора мыши на кнопки цвет не меняется на зеленый. Это похоже на статику, только All about kittens по умолчанию она зеленая

4. Поддержите или примите этот ответ, если это помогло.

5. Что касается других вопросов, я бы предложил сначала изучить некоторые базовые учебные пособия по CSS. Это очень помогло бы вам, после этого, если вы все еще сталкиваетесь с проблемами, тогда откройте другой вопрос. Спасибо!

Ответ №2:

В основном эти два свойства исправят это.
дисплей: гибкий;
выравнивание-содержимое: по центру;

Добавьте эти классы и удалите цвет фона из .nav .меню

 .nav .menu{
  display: flex;
  gap: 1rem;
  list-style: none;
}

.nav{
  display: flex;
  justify-content: center;
}
  
.nav_wrapper {
  background: #f1f1f1;
}

Также заверните свой <div class="nav"></div> в другой div.nav_wrapper

 <div class="nav_wrapper">
  <div class="nav">


  </div>
</div>

1. Я создал jsfiddle с кодом, который вы предложили : jsfiddle.net/pensee/q8g7kfxz/1 Он выровнял список по центру, но при наведении курсора цвет не меняется на зеленый. Также изображение с заголовком "LINE FRIENDS INC не выровнено по центру. Не уверен, правильно ли я следил за тобой. Я не могу включить свой локальный образ в jsfiddle. Есть ли способ это сделать? Чтобы я мог поделиться правильными скрипками..

2. jsfiddle.net/eubahy2t/2 Вот так, братан, отредактировал только последний класс и изменил цвет границы и цвет текста. Также изменена ссылка с хостинга изображений.

3. Большое спасибо, братан. Ты потрясающая!!

Метки: Элемент списка стилей в HTML