В неупорядоченном списке:
<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.Обоснование «ИЛИ» неважно.
Текст ленивого животного может быть обернут в дополнительный элемент, но мне придется перепроверить.
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/
К сожалению, встроенные элементы (или элементы, имеющие 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"> </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>Вы можете сделать это с помощью таблицы, но это не чистый 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>Обратите внимание, что он отображается не так, как вы хотите, потому что он переключает строки в каждой опции. Однако я надеюсь, что это поможет вам приблизиться к ответу.
<span>Тег необходимо будет установить , чтобы , display:blockкак это встроенный элемент и будет игнорировать ширину.
так:
<style type="text/css"> span { width: 50px; display: block; } </style>а потом:
<li><span> </span>something</li>
<li><span>AND</span>something else</li>В идеальном мире вы бы достигли этого просто используя следующий CSS
<style type="text/css">
span {
display: inline-block;
width: 50px;
}
</style>Это работает во всех браузерах, кроме FF2 и ниже.
Firefox 2 и ниже не поддерживают это значение. Вы можете использовать -moz-inline-box, но имейте в виду, что это не то же самое, что inline-block, и он может работать не так, как вы ожидаете в некоторых ситуациях.
Цитата взята из quirksmode
Ну, всегда есть метод грубой силы:
<li><pre> The lazy dog.</pre></li>
<li><pre>AND The lazy cat.</pre></li>
<li><pre>OR The active goldfish.</pre></li>Или это то, что вы подразумевали под «дополнением» текста? Это неоднозначная работа в этом контексте.
Это звучит как домашний вопрос. Надеюсь, ты не пытаешься заставить нас сделать твою домашнюю работу за тебя?
В этом случае интервал между людьми не может быть блочным элементом, поскольку остальная часть текста между элементами 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.
Это должно работать лучше для простых случаев.
<style type="text/css">
span {
position:absolute;
width: 50px;
}
</style>Вы можете сделать этот метод для назначения ширины для встроенных элементов
попробуй это
> <span class="input-group-addon" style="padding-left:6%;
> padding-right:6%; width:150px; overflow: auto;">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>
diplay: inline-block; width: 32px;будет в большинстве современных браузеров.diplayчтобы прочитатьdisplay, кстати, это работает для меня. спасибо