Stała szerokość CSS w zakresie

381

Na liście nieuporządkowanej:

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

Dodawanie atrybutu klasy lub stylu jest dozwolone, ale uzupełnianie tekstu i dodawanie lub zmiana znaczników jest niedozwolone.

Strona jest renderowana za pomocą Courier New.

Celem jest ustawienie tekstu po rozpiętości.

    The lazy dog.
AND The lazy cat.
OR  The active goldfish.

Uzasadnienie „OR” jest nieistotne.

Tekst leniwego zwierzęcia może być zawinięty w dodatkowy element, ale będę musiał dwukrotnie sprawdzić.

html css Jason Saldo
źródło

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>

Rozwiń fragment kodu

Jak powiedział Eoin, musisz umieścić niezniszczalną spację w swoich „pustych” rozpiętościach, ale nie możesz przypisać szerokości elementowi inline, tylko wypełnieniu / marginesowi, więc musisz ustawić go jako pływający, abyś mógł nadaj mu szerokość.

Przykład jsfiddle znajduje się na stronie http://jsfiddle.net/laurensrietveld/JZ2Lg/

Stephen Caldwell
źródło

1

jest domyślnie elementem wbudowanym - przestawienie go nie zapewni mu szerokości.

codeinthehole

56

Właściwość float generuje „pole bloku”, które ma szerokość.

Stephen Caldwell

83

Powinno tak być diplay: inline-block; width: 32px;w większości nowoczesnych przeglądarek.

Paulo Bueno

2

@Randy Marsh - nie, właściwość width ma tylko wpływ, ponieważ właściwość float zmienia element na wyświetlanie bloku, jak opisano powyżej Stephen Caldwell.

codeinthehole

14

@PauloBueno czy możesz zmienić diplayna czytać display, BTW, to działa dla mnie. dzięki

basarat

507

W idealnym świecie można to osiągnąć, używając następującego css

<style type="text/css">

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

</style>

Działa to we wszystkich przeglądarkach oprócz FF2 i niższych.

Firefox 2 i nowsze wersje nie obsługują tej wartości. Możesz użyć -moz-inline-box, ale pamiętaj, że nie jest to to samo co blok inline i może nie działać tak, jak się spodziewasz w niektórych sytuacjach.

Cytat pochodzi z quirksmode

kod w otworze
źródło

1

@NicholasPickering .. co powiesz na wkhtmltopdf?

codeinthehole

Hm, nie jestem pewien. To tylko niewielka porażka. Skończyło się na tym, że muszę użyć tabel, aby uzyskać pożądany efekt.

Nicholas Pickering

Cóż, mogę polecić wkhtmltopdf, jeśli kiedykolwiek potrzebujesz czegoś zgodnego z CSS3.

codeinthehole

7

Tymczasem 10 lat później jest to zdecydowanie najlepsza droga.

vog

19

Niestety elementy wbudowane (lub elementy posiadające display: inline) ignorują właściwość width. Zamiast tego powinieneś użyć pływających elementów 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>

Teraz widzę, że musisz użyć zakresów i list, więc musimy przepisać to trochę:

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

Tamas Czinege
źródło

3

To świetne rozwiązanie. Pływające divy naśladują zamierzone zachowanie przęseł, gdy ustawiają się w linii poziomo. Ważne jest, aby pamiętać o jasności: oba przełamania linii. To świetny sposób na uniknięcie tabel w tym kontekście.

artur

Nie rozumiem, przycisk jest elementem wbudowanym lub blokiem wbudowanym, dlaczego „szerokość” ma do niego zastosowanie? Przycisk wydaje się elementem wbudowanym, prawda? Czy jest jakiś dokument pokazujący domyślne właściwości „display” wszystkich elementów HTML?

GMsoF,

14

Tag musi być ustawiony display:block, ponieważ jest to element inline i zignoruje szerokość.

więc:

<style type="text/css"> span { width: 50px; display: block; } </style>

i wtedy:

<li><span>&nbsp;</span>something</li>
<li><span>AND</span>something else</li>

Aaron Powell
źródło

Nie, nie sądzę, że to działa. „coś” przechodzi do następnej linii. Brakuje „<”

user1537366

Jak powiedziałem, to NIE działa! Sprawdź jsfiddle.net/m156a0qp . Ponadto, nigdy nie jest dobrze mieszać się z CSS wszystkich elementów zakresu!

user1537366

4

<style type="text/css">

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

</style>

Możesz wykonać tę metodę przypisywania szerokości elementom wbudowanym

Augusta Franciszka
źródło

2

Ludzie rozpiętości w tym przypadku nie mogą być elementem blokowym, ponieważ reszta tekstu pomiędzy elementami li spadnie. Również użycie float jest bardzo złym pomysłem, ponieważ będziesz musiał ustawić szerokość dla całego elementu li, a ta szerokość będzie musiała być taka sama jak szerokość całego elementu ul lub innego pojemnika.

Spróbuj czegoś takiego w 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>

i w 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

więc, gdy element li jest względny, formatujesz element span jako absolutny i na górze: 0; left: 0; więc pozostaje w lewym górnym rogu i ustawiasz padding-left (lub: padding: 0px 0px 0px 80px;), aby ustawić to wolne miejsce dla elementu zakresu.

Powinien działać lepiej w prostych przypadkach.

Arturro
źródło

1

Spróbuj tego

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

Rahmad Saleh
źródło

1

Za pomocą HTML 5.0 można ustalić szerokość bloku tekstu za pomocą lub <div>.

Na to, co jest ważne, aby dodać następującą linię CCS

display: inline-block;

Dla twojego pustego ważne jest dodanie  miejsca.

Mój kod jest następujący

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>

Rozwiń fragment kodu

PS: Zdefiniowałem tabklasę, ponieważ ul li spanselektor CSS nie działa na moim komputerze!

schlebe
źródło

wstawianie & nbsp; działało dla mnie!

adrien le coarer

0

Możesz to zrobić za pomocą tabeli, ale nie jest to czysty 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>

Zauważ, że nie wyświetla się dokładnie tak, jak chcesz, ponieważ przełącza linię na każdej opcji. Mam jednak nadzieję, że to pomoże ci zbliżyć się do odpowiedzi.

luiscubal
źródło

-1

Cóż, zawsze istnieje metoda brutalnej siły:

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

A może to rozumiesz przez „wypełnianie” tekstu? To dwuznaczna praca w tym kontekście.

To brzmi trochę jak zadanie domowe. Mam nadzieję, że nie próbujesz namówić nas do odrabiania lekcji?

eaolson
źródło

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

Rozwiń fragment kodu

Pepe Unodostres
źródło

Stała szerokość CSS w zakresie

Odpowiedzi: