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

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

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

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

Страница выполняется с помощью Courier New.

Цель состоит в том, чтобы текст был выровнен по длине.

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

Обоснование "ИЛИ" несущественно.

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

Ответы

Ответ 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>

Ответ 2

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

<style type="text/css">

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

</style>

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

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

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

Ответ 3

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

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

Ответ 4

Тег <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>

Ответ 5

<style type="text/css">

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

</style>

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

Ответ 6

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

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

Ответ 7

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

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

Ответ 8

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

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

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

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

Ответ 9

попробуй это

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

Ответ 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>