Блог

Главная - Вопросы по программированию - Установить выравнивание текста по левому краю внутри выпадающего списка?

Установить выравнивание текста по левому краю внутри выпадающего списка?

#html #css

#HTML #css

Вопрос:

Я создаю чистый раскрывающийся список html и css, и я могу скрыть его и показать, но я не могу выровнять текст внутри выпадающего списка по левому краю?

Может кто-нибудь, пожалуйста, указать на то, что я делаю неправильно?

Посмотрите этот рабочий Codepen.

Или посмотрите этот рабочий пример :-

 .toggle-dropdown p {
  text-align: center;
}

.dropdown {
  border: 1px solid grey;
  width: 8%;
  margin: auto;
  box-shadow: 10px 10px 8px #888888;
  padding: 0px 16px;
  display: none;
}

.toggle-dropdown:hover .dropdown {
  display: block;
}

ul {
  list-style-type: none;
}

li a {
  color: black;
  padding: 12px;
  text-decoration: none;
  display: inline-block;
  text-align: left;
} 
 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>DropDown</title>
</head>

<body>
  <div class="toggle-dropdown">
    <p>Dropdown Text</p>
    <div class="dropdown">
      <ul>
        <li><a href="">Home</a></li>
        <li><a href="">Messgaes</a></li>
        <li><a href="">Contacts</a></li>
        <li><a href="">About</a></li>
      </ul>
    </div>
  </div>
</body>

</html>

Любая помощь будет оценена. Спасибо.

Ответ №1:

Вам нужно только установить padding-inline-start: 0; в ul блоке: В моем разветвленном codepen: https://codepen.io/adampweb/pen/MWjOPOO

 .toggle-dropdown p {
  text-align: center;
}

.dropdown {
  border: 1px solid grey;
  width: 8%;
  margin: auto;
  box-shadow: 10px 10px 8px #888888;
  padding: 0px 16px;
  display: none;
}

.toggle-dropdown:hover .dropdown {
  display: block;
}

ul {
  list-style-type: none;
  padding-inline-start: 0;
}

li a {
  color: black;
  padding: 12px;
  text-decoration: none;
  display: inline-block;
  text-align: left;
} 
 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>DropDown</title>
</head>

<body>
  <div class="toggle-dropdown">
    <p>Dropdown Text</p>
    <div class="dropdown">
      <ul>
        <li><a href="">Home</a></li>
        <li><a href="">Messgaes</a></li>
        <li><a href="">Contacts</a></li>
        <li><a href="">About</a></li>
      </ul>
    </div>
  </div>
</body>

</html>

Комментарии:

1. Спасибо, но padding-left:0 также дал тот же результат. в чем разница между ними?

2. Посмотрите на это интерактивное объяснение: developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-start

3. В вашем случае padding-left: 0 также можно использовать, но если вы хотите добавить новый язык на свой сайт, например, арабский, то padding-inline-start: 0; это лучший вариант

Метки: