CSS фиксированная ширина в пролете

В неупорядоченном списке:

<li><span></span> The lazy dog.</li>
<li><span>AND</span> The lazy cat.</li>
<li><span>OR</span> The active goldfish.</li>

Добавление атрибута класса или стиля разрешено, но заполнение текста и добавление или изменение тегов не допускается.

Страница отображается с помощью Courier New.

Цель - выстроить текст после интервала.

    The lazy dog.
AND The lazy cat.
OR  The active goldfish.

Обоснование «ИЛИ» неважно.

Текст ленивого животного может быть обернут в дополнительный элемент, но мне придется перепроверить.

2.11.2008 22:36:31
10 ОТВЕТОВ
РЕШЕНИЕ

ul {
  list-style-type: none;
  padding-left: 0px;
}

ul li span {
  float: left;
  width: 40px;
}
<ul>
  <li><span></span> The lazy dog.</li>
  <li><span>AND</span> The lazy cat.</li>
  <li><span>OR</span> The active goldfish.</li>
</ul>

Как сказал Эойн, вам нужно поместить неразрывный пробел в ваши «пустые» промежутки, но вы не можете назначить ширину встроенному элементу, только отступы / отступы, поэтому вам нужно сделать так, чтобы он плавал так, чтобы вы могли дать ему ширину.

Для jsfiddle примера см http://jsfiddle.net/laurensrietveld/JZ2Lg/

425
20.04.2020 18:40:36
<span> является встроенным элементом по умолчанию - и плавающий он не даст ему ширину.
codeinthehole 2.11.2008 23:14:32
Свойство float генерирует «блок-блок», который имеет ширину.
Stephen Caldwell 2.11.2008 23:23:38
Должно быть так diplay: inline-block; width: 32px;будет в большинстве современных браузеров.
Paulo Bueno 9.01.2012 18:18:29
@Randy Marsh - нет, свойство width действует только потому, что свойство float меняет элемент на отображение блока, как описано выше Стивеном Колдуэллом.
codeinthehole 9.03.2012 18:44:40
@PauloBueno вы можете изменить, diplayчтобы прочитать display, кстати, это работает для меня. спасибо
basarat 22.08.2013 03:10:07

К сожалению, встроенные элементы (или элементы, имеющие display: inline) игнорируют свойство width. Вы должны использовать плавающие div вместо:

<style type="text/css">
div.f1 { float: left; width: 20px; }
div.f2 { float: left; }
div.f3 { clear: both; }
</style>

<div class="f1"></div><div class="f2">The Lazy dog</div><div class="f3"></div>
<div class="f1">AND</div><div class="f2">The Lazy cat</div><div class="f3"></div>
<div class="f1">OR</div><div class="f2">The active goldfish</div><div class="f3"></div>

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

<html><head>
<style type="text/css">
        span.f1 { display: block; float: left; clear: left; width: 60px; }
    li { list-style-type: none; }
    </style>

</head><body>
<ul>
<li><span class="f1">&nbsp;</span>The lazy dog.</li>
<li><span class="f1">AND</span> The lazy cat.</li>
<li><span class="f1">OR</span> The active goldfish.</li>
</ul>
</body>
</html>
19
2.11.2008 23:09:36
Это отличное решение. Плавающие div-ы имитируют предполагаемое поведение пролетов, когда они выстраиваются горизонтально. Важно помнить ясно: разрыв строки. Это отличный способ избежать таблиц в этом контексте.
artur 11.02.2010 16:22:16
Я не понимаю, кнопка является встроенным или встроенным элементом блока, почему «ширина» будет применяться к нему? Кнопка выглядит как встроенный элемент, верно? Есть ли какие-либо документы, показывающие свойства отображения по умолчанию для всех элементов HTML?
GMsoF 25.04.2014 08:32:27

Вы можете сделать это с помощью таблицы, но это не чистый CSS.

<style>
ul{
    text-indent: 40px;
}

li{
    list-style-type: none;
    padding: 0;
}

span{
    color: #ff0000;
    position: relative;
    left: -40px;
}
</style>


<ul>
<span></span><li>The lazy dog.</li>
<span>AND</span><li>The lazy cat.</li>
<span>OR</span><li>The active goldfish.</li>
</ul>

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

0
2.11.2008 23:00:21

<span>Тег необходимо будет установить , чтобы , display:blockкак это встроенный элемент и будет игнорировать ширину.

так:

<style type="text/css"> span { width: 50px; display: block; } </style>

а потом:

<li><span>&nbsp;</span>something</li>
<li><span>AND</span>something else</li>
14
9.02.2015 02:52:55
Нет, я не думаю, что это работает. «что-то» переходит на следующую строку. И отсутствует "<"
user1537366 8.02.2015 11:59:19
Как я уже сказал, это не работает! Проверьте jsfiddle.net/m156a0qp вне. Кроме того, никогда не стоит вмешиваться в CSS всех элементов span!
user1537366 12.02.2015 11:03:12

В идеальном мире вы бы достигли этого просто используя следующий CSS

<style type="text/css">

span {
  display: inline-block;
  width: 50px;
}

</style>

Это работает во всех браузерах, кроме FF2 и ниже.

Firefox 2 и ниже не поддерживают это значение. Вы можете использовать -moz-inline-box, но имейте в виду, что это не то же самое, что inline-block, и он может работать не так, как вы ожидаете в некоторых ситуациях.

Цитата взята из quirksmode

503
2.11.2008 23:27:37
@NicholasPickering .. как насчет wkhtmltopdf?
codeinthehole 2.05.2013 14:03:00
Хм, не уверен. Это просто небольшая неудача. Закончилось необходимость использовать таблицы для получения желаемого эффекта.
Nicholas Pickering 2.05.2013 14:10:52
Ну, я могу порекомендовать wkhtmltopdf, если вам когда-нибудь понадобится что-нибудь, совместимое с CSS3.
codeinthehole 3.05.2013 14:39:05
Между тем, 10 лет спустя, это определенно путь.
vog 28.09.2018 07:49:40

Ну, всегда есть метод грубой силы:

<li><pre>    The lazy dog.</pre></li>
<li><pre>AND The lazy cat.</pre></li>
<li><pre>OR  The active goldfish.</pre></li>

Или это то, что вы подразумевали под «дополнением» текста? Это неоднозначная работа в этом контексте.

Это звучит как домашний вопрос. Надеюсь, ты не пытаешься заставить нас сделать твою домашнюю работу за тебя?

-1
2.11.2008 23:45:37

В этом случае интервал между людьми не может быть блочным элементом, поскольку остальная часть текста между элементами li будет уменьшена. Также использование float - очень плохая идея, потому что вам нужно установить ширину для всего элемента li, и эта ширина должна быть такой же, как ширина всего элемента ul или другого контейнера.

Попробуйте что-то вроде этого в HTML:

<li><span></span><strong>The</strong> lazy dog.</li>
<li><span>AND</span> <strong>The</strong> lazy cat.</li>
<li><span>OR</span>  <strong>The</strong> active goldfish.</li>

и в css

li {position:relative;padding-left:80px;} // 80px or something else
li span {position:absolute;top:0;left:0;}
li strong {color:red;} // red or else

поэтому, когда элемент li является относительным, вы форматируете элемент span как абсолютный и сверху: 0; left: 0; поэтому он остается в верхнем левом углу, и вы устанавливаете padding-left (или: padding: 0px 0px 0px 80px;), чтобы установить это свободное пространство для элемента span.

Это должно работать лучше для простых случаев.

2
15.04.2010 13:39:51
<style type="text/css">

span {
  position:absolute;
  width: 50px;
}

</style>

Вы можете сделать этот метод для назначения ширины для встроенных элементов

4
14.09.2013 21:05:25

попробуй это

> <span class="input-group-addon" style="padding-left:6%;
> padding-right:6%; width:150px; overflow: auto;">
1
18.02.2018 03:45:27

ul {
	list-style-type: none;
	padding-left: 0px;
}

ul li span { 
	float: left;
	width: 40px;
}
<ul>
    <li><span></span> The lazy dog.</li>
    <li><span>AND</span> The lazy cat.</li>
    <li><span>OR</span> The active goldfish.</li>
</ul>

-1
4.04.2019 13:48:08