Текст списка нижнего колонтитула не центрируется

У меня проблема с центрированием списка в нижнем колонтитуле: похоже, что с левой стороны есть отступы, мешающие его центрированию.

footer{
    background-color: rgb(35, 18, 61);   
}
.footerContainer{
    width: 100%;
    padding: 20px 30px 20px ;
    text-align: center;
}

.footerNav{
    margin: 30px 0;
}
.footerNav ul{
    display: flex;
    justify-content: center;
    list-style-type: none;
}

.footerNav ul li a{
    margin: 20px;
    text-decoration: none;
    font-size: 1.2em;
}

@media (max-width: 360px){
    .footerNav ul{
        flex-direction: column;
    } 
    .footerNav ul li{
        text-align: center;
        margin: 10px;
    }
}

<footer>
        <div class = "footerContainer">
            <img src = "/images/middle.png" class = "center" style = "width: 100%;">
            
            <div class = "footerNav">
                <ul><li><a a target = "###">My Store</a></li>
                    <li><a href = "#artwork">My Artwork</a></li>
                    <li><a href = "#webdesigns">My Web designs</a></li>
                    <li><a href = "#top">Back to top</a></li>
                </ul>
            </div>
        </div>
    </footer>

Я пробовал добавить text-align: center; к каждому элементу нижнего колонтитула, я также пробовал margin: 0 auto; и просматривал отступы и поля в остальной части моего HTML-файла, но после их удаления ничего не изменилось. Что мне не хватает?

Вы имеете в виду, что по ширине происходит переполнение, из-за чего нижний колонтитул перемещается вправо и влево с помощью прокрутки?

— 08.07.2024 23:05

html css

08.07.2024 22:54

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вот что я изменил и добавил:

.footerContainer – я изменил ширину на авто вместо 100%. установка значения 100 % означает максимально широкую ширину контейнера, при этом auto может приспособиться к максимально возможному дополнительному пространству, которое только может позволить.
Переопределите таблицы стилей пользовательского агента, установив для li display значение «contents». Это означает, что лишнее пространство, которое было в элементе списка, удаляется полностью.
Переопределите таблицу стилей пользовательского агента, установив для ul-padding-inline-start, для которого по умолчанию установлено значение 40 пикселей, значение 0!important.

footer{
background-color: rgb(35, 18, 61);   
}
.footerContainer{
    width: auto ;
    padding: 20px 30px 20px ;
    text-align: center;
}

.footerNav{
    margin: 30px 0;
}
.footerNav ul{
    display: flex;
    justify-content: center;
    list-style-type: none;
}

.footerNav ul li a{
    margin: 20px;
    text-decoration: none;
    font-size: 1.2em;
}

ul {
    padding-inline-start: 0!important;
}

li {
  display: contents!important;
}

@media (max-width: 360px){
    .footerNav ul{
        flex-direction: column;
    } 
  

    .footerNav ul li{
        align-content: center;
        margin: 10px;
        
    }
  
}

<!DOCTYPE html>
<html lang = "en">
<head>
  <meta charset = "UTF-8">
  <meta http-equiv = "X-UA-Compatible" content = "IE=edge">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <footer>
        <div class = "footerContainer">
            <img src = "/images/middle.png" class = "center" style = "width: 100%;">
            
            <div class = "footerNav">
                <ul><li><a a target = "###">My Store</a></li>
                    <li><a href = "#artwork">My Artwork</a></li>
                    <li><a href = "#webdesigns">My Web designs</a></li>
                    <li><a href = "#top">Back to top</a></li>
                </ul>
            </div>
        </div>
    </footer>
</body>
</html>

09.07.2024 00:14

Ответ принят как подходящий

Первая проблема заключается в том, что вы указываете, что ваш footerContainer имеет ширину 100% (его родительский элемент footer), но также имеет отступы. Модель бокса по умолчанию заключается в том, что ширина блока равна ширине только его содержимого, без учета отступов и границ. Вот почему контейнер оказывается слишком большим и переполняется вправо. Вы можете установить box-sizing: border-box на footerContainer, чтобы использовать альтернативную модель блока, где указанная ширина включает любые отступы и границы. Альтернативно вы можете удалить width: 100%, как предлагает @franjangonz.

footer {
  color: white;
  background-color: rgb(35, 18, 61);   
}

footer img {
  width: 100%;
}

.footerContainer {
  width: 100%;
  padding: 20px 30px 20px;
  text-align: center;
  box-sizing: border-box;
}

.footerNav {
  margin: 30px 0;
}

.footerNav ul {
  display: flex;
  justify-content: center;
  list-style-type: none;
}

.footerNav ul li a {
  margin: 20px;
  text-decoration: none;
  font-size: 1.2em;
  color: inherit;
}

@media (max-width: 360px){
  .footerNav ul {
    flex-direction: column;
  } 
  .footerNav ul li {
    text-align: center;
    margin: 10px;
  }
}

<footer>
  <div class = "footerContainer">
    <img src = "http://picsum.photos/500/100">

    <div class = "footerNav">
      <ul>
        <li><a a target = "###">My Store</a></li>
        <li><a href = "#artwork">My Artwork</a></li>
        <li><a href = "#webdesigns">My Web designs</a></li>
        <li><a href = "#top">Back to top</a></li>
      </ul>
    </div>
  </div>
</footer>

Вторая проблема — стиль по умолчанию, применяемый к спискам. @franjangonz предлагает, как это переопределить, но я бы упростил структуру документа, полностью удалив список. Используйте элемент <nav> для раздела навигации, он не обязательно должен содержать список; он может просто содержать ссылки <a>. Кроме того, footerContainer не обязателен, вы можете просто стилизовать сам нижний колонтитул. Вот фрагмент того, как я бы это написал:

footer {
  color: white;
  background-color: rgb(35, 18, 61);   
  padding: 30px;
  text-align: center;
  font-size: 1.2em;
}

footer img {
  width: 100%;
}

footer nav {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 20px;
}

footer nav a {
  color: inherit;
  text-decoration: none;
}

footer nav a:hover {
  color: yellow;
}

<footer>
  <img src = "http://picsum.photos/500/100">
  <nav>
    <a href = "">My Store</a>
    <a href = "#artwork">My Artwork</a>
    <a href = "#webdesigns">My Web designs</a>
    <a href = "#top">Back to top</a>
  </nav>
</footer>

09.07.2024 03:22

Другие вопросы по теме

Неожиданное дополнение с помощью кнопки

Div со строками разной высоты в HTML5

Проблема с заполнением при создании панели навигации

Добавьте анимацию прогресса в круг

Плавная прокрутка к элементу div при нажатии на якорную ссылку

Как сделать так, чтобы фрагмент одновременно появлялся и выделялся красным?

CSS липкие карты с использованием сетки

Как вставить разрыв строки в ::before элемента с помощью CSS и attr()

Как правильно отразить логотип VueJS только с помощью CSS?

Что моя кнопка не отображается одинаково в разных браузерах?

Текст списка нижнего колонтитула не центрируется

Ответы 2

Другие вопросы по теме

Похожие вопросы