Выравнивание текста в списке по диапазону рядом с ним - PullRequest
Новая
       3

Выравнивание текста в списке по диапазону рядом с ним

1 голос
/ 16 января 2020

Добрый день, новичок здесь просто хочет спросить, я пытаюсь создать список, как тот, что на картинке, должен использовать тег li и добавить интервал рядом с ним? 

<li>
    <a href="#">Accessories</a>
    <span>6%</span>
</li>

, но что происходит, когда тег li содержит более длинный текст, а цифры рядом с ним не выравниваются по вертикали, когда я добавляю поле к диапазону, чтобы разделить их.

Пример:

sample image

Результат:

result image

Ответы [ 5 ]

1 голос
/ 16 января 2020

Вы можете сделать li сгибанием и использовать выравнивание содержимого между: 

.flex {
  list-style: none;
  width: 50%;
  margin: 0;
  padding: 0;
}

.flex>li {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5em;
}

.flex span {
  margin-left: 1em;
  /*bit of spacing between link and span in case text is very long */
}
<ul class="flex">
  <li>
    <a href="#">Accessories</a>
    <span>6%</span>
  </li>
  <li>
    <a href="#">Another</a>
    <span>16%</span>
  </li>
  <li>
    <a href="#">And Another that might have long text that could spill over 2 lines</a>
    <span>12%</span>
  </li>
</ul>

Преимущества использования flex над плавающей точкой:

  • вам не нужно чёткое исправление
  • , если Ваш якорь находится над несколькими строками, ваш промежуток остается на одной и той же строке, а не помещается под
  • float, никогда не предназначались для разметки документов, поэтому не злоупотребляйте ими, теперь css прогрессирует используйте вместо этого правильные методы
0 голосов
/ 16 января 2020

Вы можете добавить стиль к 

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<ul>
		<li>
			<a href="#">Accessories</a>
			<span style="float: right;">6%</span>
		</li>
		<li>
			<a href="#">Accessorieaaaaa</a>
			<span style="float: right;">6%</span>
		</li>
		<li>
			<a href="#">Access</a>
			<span style="float: right;">6%</span>
		</li>
		<li>
			<a href="#">As</a>
			<span style="float: right";>6%</span>
		</li>
	</ul>
</body>
</html>
0 голосов
/ 16 января 2020

Я предлагаю вам использовать тег span между тегами списка и использовать атрибут margin, чтобы исправить расстояние между ними.

0 голосов
/ 16 января 2020

Создайте список заказов и задайте тип списка none, затем установите span для float right, при этом span всегда будет перемещаться вправо. Этот метод довольно прост и отзывчив, другие методы, такие как margin и spacing, также хороши, но они не адаптивны и легко ломаются в небольших устройствах. 

ul{
  list-style-type:none;
  padding:20px;
  width:200px;
}
span{
  float:right;
}
<ul>
  <li>
    <p>Computer<span>$6</span></p>
  </li>
  <li>
    <p>Computer<span>$6</span></p>
  </li>
</ul>
0 голосов
/ 16 января 2020

сначала я предлагаю использовать bootstrap, это гораздо проще 

<li>
    <a href="#">Accessories</a>
    <span class="text-tight">6%</span>
</li>

, используя bootstrap классы лучше, чем чистые css, потому что это займет у вас слишком много sh вместо добавленных простых классов тебе создать класс.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...