Larghezza fissa CSS in un arco

381

All'interno di un elenco non ordinato:

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

L'aggiunta di un attributo di classe o stile è consentita, ma non è consentito riempire il testo e aggiungere o modificare tag.

Il rendering della pagina con Courier New.

L'obiettivo è allineare il testo dopo l'intervallo.

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

La giustificazione della "OR" non è importante.

Il testo di un animale pigro potrebbe essere racchiuso in un ulteriore elemento, ma dovrò ricontrollare.

html css

— jason saldo
fonte

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>

Espandi frammento

Come ha detto Eoin, è necessario inserire uno spazio non interrotto nelle span "vuote", ma non è possibile assegnare una larghezza a un elemento inline, solo riempimento / margine, quindi è necessario renderlo mobile in modo da poter dagli una larghezza.

Per un esempio di jsfiddle, vedere http://jsfiddle.net/laurensrietveld/JZ2Lg/

— Stephen Caldwell
fonte

1

è un elemento incorporato per impostazione predefinita - e mobile non gli darà una larghezza.

— codeinthehole,

56

La proprietà float genera una "casella di blocco" che ha una larghezza.

— Stephen Caldwell,

83

Dovrebbe essere diplay: inline-block; width: 32px;lo farà nella maggior parte dei browser moderni.

— Paulo Bueno,

2

@Randy Marsh - no, la proprietà width ha effetto solo perché la proprietà float cambia l'elemento in un display a blocchi, come descritto da Stephen Caldwell sopra.

— codeinthehole

14

@PauloBueno puoi cambiare diplayper leggere display, BTW, funziona per me. grazie

— basarat il

507

In un mondo ideale lo faresti semplicemente usando i seguenti css

<style type="text/css">

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

</style>

Funziona su tutti i browser tranne FF2 e precedenti.

Firefox 2 e versioni precedenti non supportano questo valore. Puoi usare -moz-inline-box, ma tieni presente che non è uguale al blocco inline e potrebbe non funzionare come previsto in alcune situazioni.

Citazione tratta da quirksmode

— codeinthehole
fonte

1

@NicholasPickering .. che ne dici di wkhtmltopdf?

— codeinthehole

Hm, non ne sono sicuro. È solo una piccola battuta d'arresto. Ho dovuto usare le tabelle per ottenere l'effetto desiderato.

— Nicholas Pickering,

Bene, posso consigliare wkhtmltopdf se hai mai bisogno di qualcosa che sia conforme a CSS3.

— codeinthehole,

7

Nel frattempo, 10 anni dopo, questa è sicuramente la strada da percorrere.

— Vog,

19

Sfortunatamente gli elementi inline (o gli elementi con display: inline) ignorano la proprietà width. Dovresti usare invece div galleggianti:

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

Ora vedo che devi usare span ed elenchi, quindi dobbiamo riscriverlo un po ':

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

3

Questa è un'ottima soluzione. I div fluttuanti imitano il comportamento previsto delle campate mentre si allineano orizzontalmente. È importante ricordare il chiaro: entrambe le interruzioni di riga. È un ottimo modo per evitare le tabelle in questo contesto.

— artur,

Non capisco, il pulsante è inline o inline-block element, perché "width" verrà applicato ad esso? Il pulsante sembra un elemento incorporato giusto? Esiste un documento che mostra le proprietà "display" predefinite di tutti gli elementi html?

— GMsoF,

14

Il tag dovrà essere impostato su display:blockin quanto è un elemento incorporato e ignorerà la larghezza.

così:

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

e poi:

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

— Aaron Powell
fonte

No, non penso che funzioni. "qualcosa" va alla riga successiva. E manca un "<"

— user1537366

Come ho già detto, NON funziona! Controllare jsfiddle.net/m156a0qp fuori. Inoltre, non è mai buono immischiarsi nel CSS di tutti gli elementi di span!

— user1537366,

4

<style type="text/css">

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

</style>

È possibile eseguire questo metodo per assegnare la larghezza per gli elementi incorporati

— Augusto Francesco
fonte

2

Le persone in questo caso non possono essere un elemento a blocchi perché il resto del testo tra gli elementi li scenderà. Anche usare float è una pessima idea perché dovrai impostare la larghezza per l'intero elemento li e questa larghezza dovrà essere uguale alla larghezza dell'intero elemento ul o altro contenitore.

Prova qualcosa del genere in 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>

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

quindi, quando l'elemento li è relativo, formatta l'elemento span in modo che sia assoluto e in alto: 0; left: 0; quindi rimane in alto a sinistra e si imposta il padding-left (o: padding: 0px 0px 0px 80px;) per impostare questo spazio libero per l'elemento span.

Dovrebbe funzionare meglio per casi semplici.

— arturro
fonte

1

prova questo

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

— Rahmad Saleh
fonte

1

Utilizzando HTML 5.0, è possibile correggere la larghezza del blocco di testo utilizzando o <div>.

Per , ciò che è importante è aggiungere la seguente linea CCS

display: inline-block;

Per il tuo vuoto l'importante è aggiungere  spazio.

Il mio codice sta seguendo

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>

Espandi frammento

PS: ho definito la tabclasse perché il ul li spanselettore CSS non funziona sul mio PC!

— schlebe
fonte

inserendo un & nbsp; era quello che ha funzionato per me!

— adrien le coarer,

0

Puoi farlo usando una tabella, ma non è puro 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>

Nota che non viene visualizzato esattamente come desideri, perché cambia riga su ogni opzione. Tuttavia, spero che questo ti aiuti ad avvicinarti alla risposta.

— luiscubal
fonte

-1

Bene, c'è sempre il metodo della forza bruta:

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

O è quello che intendevi per "imbottitura" del testo? È un lavoro ambiguo in questo contesto.

Sembra una domanda da fare a casa. Spero che tu non stia cercando di farci fare i compiti per te?

— eaolson
fonte

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

Espandi frammento

— Pepe Unodostres
fonte