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

381

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

<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.

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

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

html css

— Джейсон Салдо
источник

427

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/

— Стивен Колдуэлл
источник

1

является встроенным элементом по умолчанию - и плавающий он не даст ему ширину.

— codeinthehole

56

Свойство float генерирует «блок-блок», который имеет ширину.

— Стивен Колдуэлл

83

Должно быть так diplay: inline-block; width: 32px;будет в большинстве современных браузеров.

— Пауло Буэно

2

@Randy Marsh - нет, свойство width действует только потому, что свойство float меняет элемент на отображение блока, как описано выше Стивеном Колдуэллом.

— codeinthehole

14

@PauloBueno вы можете изменить, diplayчтобы прочитать display, кстати, это работает для меня. спасибо

— Басарат

507

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

<style type="text/css">

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

</style>

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

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

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

— codeinthehole
источник

1

@NicholasPickering .. как насчет wkhtmltopdf?

— codeinthehole

Хм, не уверен. Это просто небольшая неудача. Закончилось тем, что пришлось использовать таблицы, чтобы получить желаемый эффект.

— Николас Пикеринг

Ну, я могу порекомендовать wkhtmltopdf, если вам когда-нибудь понадобится что-нибудь, совместимое с CSS3.

— codeinthehole

7

Между тем, 10 лет спустя, это определенно путь.

— вог

19

К сожалению, встроенные элементы (или элементы, имеющие 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>

— Тамас Чинеге
источник

3

Это отличное решение. Плавающие div-ы имитируют предполагаемое поведение промежутков, когда они выстраиваются горизонтально. Важно помнить ясно: разрывы обеих строк. Это отличный способ избежать таблиц в этом контексте.

— artur

Я не понимаю, кнопка является встроенным или встроенным блок-элементом, почему к нему будет применена «ширина»? Кнопка выглядит как встроенный элемент, верно? Есть ли какие-либо документы, показывающие свойства отображения по умолчанию для всех элементов HTML?

— GMsoF

14

Тег нужно будет установить на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>

— Аарон Пауэлл
источник

Нет, я не думаю, что это работает. «что-то» переходит на следующую строку. И отсутствует "<"

— user1537366

Как я уже сказал, это не работает! Проверьте jsfiddle.net/m156a0qp вне. Кроме того, никогда не стоит вмешиваться в CSS всех элементов span!

— user1537366

4

<style type="text/css">

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

</style>

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

— Август Фрэнсис
источник

2

В этом случае интервал между людьми не может быть блочным элементом, поскольку остальная часть текста между элементами 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.

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

— Arturro
источник

1

попробуй это

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

— Рахмад Салех
источник

1

Используя HTML 5.0, можно зафиксировать ширину текстового блока с помощью или <div>.

Потому что важно добавить следующую строку CCS

display: inline-block;

Для вашего пустого, что важно, это добавить  пространство.

Мой код следующий

body
	{
	font-family: Arial;
	font-size:20px;
	}

div
	{
	width:200px;
	font-size:80px;
	background-color: lime;
	}
div span
	{
	display:block;
	width:200px;
	background-color: lime;
	}

ul li span
	{
	display: inline-block;
	width: 80px;
	background-color: yellow;
	}
span.tab
	{
	display: inline-block;
	width: 80px;
	background-color: yellow;
	}

&lt;DIV&gt;

<div class='test'>ABCDEF</div>

&lt;SPAN&gt;

<div>
    <span class='test'>ABCDEF</span>
</div

<br>

<ul>
  <li><span class='tab'>&nbsp;</span> The lazy dog.</li>
  <li><span class='tab'>AND</span> The lazy cat.</li>
  <li><span class='tab'>OR</span> The active goldfish.</li>
</ul>

Развернуть фрагмент

PS: я определил tabкласс, потому что ul li spanCSS селектор не работает на моем компьютере!

— schlebe
источник

вставка & NBSP; было то, что работало для меня!

— Adrien Le Coarer

0

Вы можете сделать это с помощью таблицы, но это не чистый 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>

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

— luiscubal
источник

-1

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

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

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

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

— eaolson
источник

-1

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>

Развернуть фрагмент

— Пепе Унодострес
источник