HTML5 / CSS3: как предотвратить перемещение элементов LI вправо без маркера без использования JavaScript или PHP? - PullRequest
Новая
       10

HTML5 / CSS3: как предотвратить перемещение элементов LI вправо без маркера без использования JavaScript или PHP?

0 голосов
/ 19 декабря 2018

Для HTML и CSS, как я могу предотвратить толкание li элементов с list-style: none; вправо и просто приклеить их к краю?Мой английский не очень хорош, поэтому я покажу несколько примеров.

Я искал в Google, и Google, похоже, не понял, что я имею в виду.

Вот мой фрагмент кода и, пожалуйста, запуститеэто понять, что я имею в виду: 

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style>
      body {
        border: 1px solid #000;
      }
      ul {
        list-style: none;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>a
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ul>
      </li>
      <li>b</li>
      <li>c</li>
      <li>d
        <ul>
          <li>i</li>
          <li>ii</li>
          <li>iii</li>
        </ul>
      </li>
    </ul>
  </body>
</html>

ПРИМЕЧАНИЕ: Я добавил рамку, чтобы показать выравнивание li.

Вы видели, как это стало лестницей?-типа и он не прилипает к краю?

Мой вопрос: как мне заставить их прилипать к краю, идеально выровненному в одну линию, как эта? 

a
1
2
3
b
c
d
i
ii
iii

Если у вас есть какие-либо ответыПожалуйста, дайте мне знать.

Ответы [ 3 ]

0 голосов
/ 19 декабря 2018

Вам нужно только добавить 1 строку CSS:

padding-left: 0;, чтобы удалить отступы. 

body {
  border: 1px solid #000;
}

ul {
  list-style: none;
  padding-left: 0;
}
<ul>
  <li>a
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </li>
  <li>b</li>
  <li>c</li>
  <li>d
    <ul>
      <li>i</li>
      <li>ii</li>
      <li>iii</li>
    </ul>
  </li>
</ul>
0 голосов
/ 30 декабря 2018

Я увидел более старый ответ, в котором говорилось, что в моем коде стоит margin-left: -40px, и это было самое полезное решение, и оно сработало!

Я попросил навигационную панель с отступами.

Этот ответ был удален из моего поста.

0 голосов
/ 19 декабря 2018 

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style>
      body {
        border: 1px solid #000;
      }
      ul {
        list-style: none;
        padding:0;
        margin:0;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>a
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ul>
      </li>
      <li>b</li>
      <li>c</li>
      <li>d
        <ul>
          <li>i</li>
          <li>ii</li>
          <li>iii</li>
        </ul>
      </li>
    </ul>
  </body>
</html>

Просто очистите поля по умолчанию и отступы элемента ul.

enter image description here

...