Фиксированная ширина 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.
Обоснование «ИЛИ» неважно.
Ленивый текст с животными может быть заключен в дополнительный элемент, но мне придется дважды проверить.
Ответы 11
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/
Свойство float создает «блок-бокс», который имеет ширину.
@touqen, предоставленный вами css не дает диапазону равной ширины в ff3 или Opera 9.51
@codeinthehole - Правда? Здесь он отлично работает (ff-3.0.3).
Если это будет diplay: inline-block; width: 32px;, он будет работать в большинстве современных браузеров.
@codeinthehole WebKit дает ему ширину (если, конечно, вы указываете свойство width).
@Randy Marsh - нет, свойство width имеет эффект только потому, что свойство float изменяет элемент на отображение блока, как Стивен Колдуэлл описывает выше.
@PauloBueno, можешь сменить diplay на чтение display, кстати, у меня это работает. Благодарность
К сожалению, встроенные элементы (или элементы, имеющие 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>
Это отличное решение. Плавающие div имитируют предполагаемое поведение промежутков, выстраиваясь по горизонтали. Важно помнить о четком: оба разрыва строки. В этом контексте это отличный способ избежать использования таблиц.
Я не понимаю, кнопка является встроенным или встроенным блочным элементом, почему к ней будет применяться "ширина"? Кнопка кажется встроенным элементом, верно? Есть ли какой-либо документ, показывающий "отображаемые" свойства по умолчанию для всех элементов 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>
Нет, не думаю, что это работает. «что-то» переходит на следующую строку. И отсутствует "<"
Как я уже сказал, НЕ работает! Проверьте jsfiddle.net/m156a0qp. Кроме того, никогда не стоит вмешиваться в CSS всех элементов span!
В идеальном мире вы бы достигли этого, просто используя следующий css
<style type = "text/css">
span {
display: inline-block;
width: 50px;
}
</style>
Это работает во всех браузерах, кроме FF2 и ниже.
Firefox 2 and lower don't support this value. You can use -moz-inline-box, but be aware that it's not the same as inline-block, and it may not work as you expect in some situations.
Цитата из quirksmode
@NicholasPickering .. как насчет wkhtmltopdf?
Хм, не уверен. Это всего лишь небольшая неудача. Закончилось тем, что для получения желаемого эффекта пришлось пользоваться таблицами.
Что ж, я могу порекомендовать wkhtmltopdf, если вам когда-нибудь понадобится что-то совместимое с CSS3.
Между тем, 10 лет спустя, это определенно правильный путь.
Что ж, всегда есть метод грубой силы:
<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>Используя HTML 5.0, можно исправить ширину текстового блока с помощью <span> или <div>.
Для <span> важно добавить следующую строку CCS
display: inline-block;
Для вашего пустого <span> важно добавить место для .
Мой код следует
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;
}<DIV>
<div class='test'>ABCDEF</div>
<SPAN>
<div>
<span class='test'>ABCDEF</span>
</div
<br>
<ul>
<li><span class='tab'> </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, потому что селектор CSS ul li span не работает на моем ПК!
<span> по умолчанию является встроенным элементом, и при перемещении он не имеет ширины.