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

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

361 голосов
/ 03 ноября 2008

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

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

Обоснование «ИЛИ» не имеет значения.

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

Ответы [ 10 ]

482 голосов
/ 03 ноября 2008

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

<style type="text/css">

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

</style>

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

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

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

407 голосов
/ 03 ноября 2008 

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/

.
17 голосов
/ 03 ноября 2008

К сожалению, встроенные элементы (или элементы, имеющие 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>
11 голосов
/ 03 ноября 2008

Для тега <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>
4 голосов
/ 15 сентября 2013 
<style type="text/css">

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

</style>

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

2 голосов
/ 15 апреля 2010

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

и в КСС 

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: 0px 0px 0px 80px;), чтобы установить это свободное пространство для элемента span.

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

0 голосов
/ 04 апреля 2019 

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>
0 голосов
/ 18 февраля 2018

попробуйте 

> <span class="input-group-addon" style="padding-left:6%;
> padding-right:6%; width:150px; overflow: auto;">
0 голосов
/ 03 ноября 2008

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

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

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

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

0 голосов
/ 03 ноября 2008

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...