CSS фіксована ширина в прольоті

381

У списку не упорядкованих:

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

Обґрунтування "АБО" неважливо.

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

html css

— язон сальдо
джерело

427

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/

— Стівен Колдвелл
джерело

1

є вбудованим елементом за замовчуванням - і плаваючий не дасть йому ширини.

— codeinthehole

56

Властивість float генерує "блок блоку", який має ширину.

— Стівен Колдвелл

83

Якщо це станеться, diplay: inline-block; width: 32px;це зробить у більшості сучасних браузерів.

— Пауло Буено

2

@Randy Marsh - ні, властивість width має ефект, оскільки властивість float змінює елемент на блоковий дисплей, як описано вище Стівен Колдвелл.

— codeinthehole

14

@PauloBueno Ви можете змінити diplayчитання display, BTW, це працює для мене. спасибі

— базарат

507

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

<style type="text/css">

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

</style>

Це працює у всіх браузерах, крім FF2 та нижче.

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

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

— кодінтологічний отвір
джерело

1

@NicholasPickering .. як щодо wkhtmltopdf?

— codeinthehole

Гм, не впевнений. Це лише незначна невдача. Закінчилося, що потрібно використовувати таблиці, щоб отримати бажаний ефект.

— Микола Пікерінг

Ну, я можу порекомендувати wkhtmltopdf, якщо вам колись потрібне щось, що відповідає CSS3.

— codeinthehole

7

Тим часом, через 10 років, це точно шлях.

— vog

19

На жаль, вбудовані елементи (або елементи, що мають 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">&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>

— Тамас Цинеге
джерело

3

Це чудове рішення. Плаваючі диви імітують передбачувану поведінку прольотів, коли вони розташовуються горизонтально. Важливо пам’ятати чітке: перерив обох ліній. Це прекрасний спосіб уникнути таблиць у цьому контексті.

— artur

Я не розумію, кнопка - це вбудований або вбудований блок, чому "ширина" буде застосовуватися до неї? Кнопка здається вбудованим елементом? Чи є якийсь документ, що показує властивості "display" за замовчуванням для всіх html-елементів?

— GMsoF

14

Тег необхідно буде встановити , щоб , 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>

— Аарон Пауелл
джерело

Ні, я не думаю, що це працює. "щось" переходить до наступного рядка. І є зниклий "<"

— користувач1537366

Як я вже сказав, це НЕ працює! Перевірте jsfiddle.net/m156a0qp . Крім того, ніколи не добре втручатися в CSS всіх елементів інтервалу!

— користувач1537366

4

<style type="text/css">

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

</style>

Ви можете виконати цей метод для призначення ширини для вбудованих елементів

— Август Франциск
джерело

2

Люди в цьому випадку не можуть бути блоковим елементом, оскільки решта тексту між елементами 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 відносний, ви форматуєте прольотовий елемент як абсолютний і вгорі: 0; зліва: 0; тому він залишається ліворуч і ви встановлюєте padding-left (або: padding: 0px 0px 0px 80px;), щоб встановити цей вільний простір для елемента span.

Це повинно працювати краще для простих випадків.

— Артурро
джерело

1

спробуйте це

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

— Рахмад Салех
джерело

1

Використовуючи HTML 5.0, можна виправити ширину текстового блоку за допомогою або <div>.

Бо важливо - додати наступний рядок CCS

display: inline-block;

Для ваших порожніх важливо додати  місця.

Мій код наступний

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;
	}

&lt;DIV&gt;

<div class='test'>ABCDEF</div>

&lt;SPAN&gt;

<div>
    <span class='test'>ABCDEF</span>
</div

<br>

<ul>
  <li><span class='tab'>&nbsp;</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клас, тому що ul li spanселектор CSS не працює на моєму ПК!

— шлебе
джерело

вставлення & nbsp; було те, що працювало для мене!

— adrien le coarer

0

Це можна зробити за допомогою таблиці, але це не чистий 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>

Зауважте, що він відображається не так, як вам потрібно, тому що він перемикає рядок у кожному варіанті. Однак я сподіваюся, що це допоможе вам наблизитися до відповіді.

— луїскубальний
джерело

-1

Ну, завжди є метод грубої сили:

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

Або це те, що ви мали на увазі під «підкладкою» тексту? Це неоднозначна робота в цьому контексті.

Це звучить як питання домашнього завдання. Я сподіваюся, ви не намагаєтесь змусити нас зробити домашнє завдання за вас?

— еолсон
джерело

-1

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>

Розгорніть фрагмент

— Pepe Unodostres
джерело