CSS фиксированная ширина в промежутке

Question

CSS фиксированная ширина в промежутке

в ненумерованный список:

<li><span></span> The lazy dog.</li>

<li><span>AND</span> The lazy cat.</li>

<li><span>OR</span> The active goldfish.</li>

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

страница рендеринга с курьером новым.

цель состоит в том, чтобы текст после span выстроились.

    The lazy dog.

AND The lazy cat.

OR  The active goldfish.

обоснование "или" не имеет значения.

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

459 9

html css

9 ответов:

Comments

Ничего не найдено.

Stephen Caldwell · Accepted Answer · 2017-01-04 09:36:26

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/

codeinthehole · Accepted Answer · 2008-11-03 01:27:37

в идеальном мире вы бы достигли этого, просто используя следующий css
<style type="text/css">

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

</style>
это работает на всех браузерах, кроме FF2 и ниже.

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

цитата взята из quirksmode

Tamas Czinege · Accepted Answer · 2008-11-03 01:09:36

к сожалению, встроенные элементы (или элементы с отображением: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">&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>

Aaron Powell · Accepted Answer · 2015-02-09 04:52:55

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

Augustus Francis · Accepted Answer · 2013-09-15 00:05:25

<style type="text/css">

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

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

Arturro · Accepted Answer · 2010-04-15 16:39:51

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

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

luiscubal · Accepted Answer · 2008-11-03 01:00:21

вы можете сделать это с помощью таблицы, но это не чистый 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>
обратите внимание, что он не отображается точно так, как вы хотите, потому что он переключает линию на каждой опции. Однако, я надеюсь, что это поможет вам приблизиться к ответу.

eaolson · Accepted Answer · 2008-11-03 01:45:37

Ну, всегда есть метод грубой силы:
<li><pre>    The lazy dog.</pre></li>
<li><pre>AND The lazy cat.</pre></li>
<li><pre>OR  The active goldfish.</pre></li>
или это то, что вы имели в виду под "заполнением" текста? Это неоднозначная работа в данном контексте.

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

Rahmad Saleh · Accepted Answer · 2018-02-18 05:45:27

попробуй такое

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