CSS зафиксировал ширину в промежутке
7 ответов
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>Как Eoin сказал, необходимо поместить неразрывное пространство в "пустые" промежутки, но Вы не можете присвоить ширину встроенному элементу, только дополнение/поле, таким образом, необходимо будет заставить его плавать так, чтобы можно было дать ему ширину.
Для jsfiddle примера, см. http://jsfiddle.net/laurensrietveld/JZ2Lg/
В идеальном мире Вы достигли бы этого просто использование следующего css
<style type="text/css">
span {
display: inline-block;
width: 50px;
}
</style>
, Это работает над всеми браузерами кроме FF2 и ниже.
Firefox 2 и ниже не поддерживают это значение. Можно использовать-moz-inline-box, но знать, что это не то же как встроенный блок, и это не может работать, как Вы ожидаете в некоторых ситуациях.
Кавычка, взятая от quirksmode
Эти <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>
К сожалению, встроенные элементы (или элементы, имеющие display:inline), игнорируют свойство width. Необходимо использовать плавающие отделения вместо этого:
<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>
Примечание, которое это не отображает точно как Вы, хочет, потому что это переключает строку на каждой опции. Однако я надеюсь, что это помогает Вам прийти ближе к ответу.
Ну, всегда существует метод грубой силы:
<li><pre> The lazy dog.</pre></li>
<li><pre>AND The lazy cat.</pre></li>
<li><pre>OR The active goldfish.</pre></li>
Или это, что Вы подразумевали под "дополнением" текста? Это - неоднозначная работа в этом контексте.
Это отчасти походит на вопрос о домашней работе. Я надеюсь, что Вы не пытаетесь заставить нас делать Вашу домашнюю работу для Вас?
People span в этом случае не может быть блочным элементом, потому что остальной текст между 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.
Это должно работать лучше для простых случаев.