Açıklıktaki CSS sabit genişliği

381

Sırasız bir listede:

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

Sınıf veya stil niteliği eklemeye izin verilir, ancak metni doldurmaya ve etiket eklemeye veya değiştirmeye izin verilmez.

Sayfa Courier New ile oluşturuluyor.

Amaç, dizilişten sonra metin elde etmektir.

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

"VEYA" nın gerekçesi önemsizdir.

Tembel hayvan metni ek bir öğeye sarılabilir, ancak tekrar kontrol etmem gerekecek.

html css

— Jason Saldo
kaynak

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>

Snippet'i genişlet

Eoin'in dediği gibi, "boş" açıklıklarınıza kırılmaz bir boşluk koymanız gerekir, ancak bir satır içi öğeye genişlik atayamazsınız, yalnızca dolgu / kenar boşluğu oluşturabilirsiniz. ona bir genişlik verin.

Bir jsfiddle Örneğin, bakınız http://jsfiddle.net/laurensrietveld/JZ2Lg/

— Stephen Caldwell
kaynak

1

varsayılan olarak satır içi bir öğedir - ve kayarsa genişlik vermez.

— codeinthehole

56

Float özelliği, bir genişliği olan bir "blok kutusu" oluşturur.

— Stephen Caldwell

83

Olması gereken diplay: inline-block; width: 32px;çoğu modern tarayıcıda yapılacaktır.

— Paulo Bueno

2

@Randy Marsh - hayır, width özelliği yalnızca bir etkiye sahiptir, çünkü float özelliği, öğeyi bir blok ekranına değiştirir, Stephen Caldwell'in yukarıda açıkladığı gibi.

— codeinthehole

14

@PauloBueno diplayokumak için değiştirebilir misiniz display, BTW, benim için çalışıyor. teşekkürler

— basarat

507

İdeal bir dünyada bunu sadece aşağıdaki css kullanarak elde edersiniz

<style type="text/css">

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

</style>

Bu, FF2 ve altı dışındaki tüm tarayıcılarda çalışır.

Firefox 2 ve önceki sürümleri bu değeri desteklemez. -Moz-inline-box kullanabilirsiniz, ancak bunun inline-block ile aynı olmadığını unutmayın ve bazı durumlarda beklediğiniz gibi çalışmayabilir.

Alıntı quirksmode alınan

— codeinthehole
kaynak

1

@NicholasPickering .. wkhtmltopdf ne dersin?

— codeinthehole

Hm, emin değilim. Bu sadece küçük bir aksilik. İstenen efekti elde etmek için tabloları kullanmak zorunda kaldı.

— Nicholas Pickering

Peki, CSS3 uyumlu bir şeye ihtiyacınız varsa wkhtmltopdf önerebilirim.

— codeinthehole

7

Bu arada, 10 yıl sonra, kesinlikle bu yol.

— vog

19

Maalesef satır içi öğeler (veya display: satır içi öğelere sahip öğeler) width özelliğini yok sayar. Bunun yerine yüzer div kullanmalısınız:

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

Şimdi açıklıkları ve listeleri kullanmanız gerektiğini görüyorum, bu yüzden bunu biraz yeniden yazmamız gerekiyor:

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

3

Bu harika bir çözüm. Yüzen div'ler, yatay olarak hizalandıklarında açıklıkların amaçlanan davranışını taklit eder. Açık olanı hatırlamak önemlidir: her iki satır sonu. Bu bağlamda tablolardan kaçınmanın harika bir yoludur.

— artur

Anlamıyorum, düğme satır içi veya satır içi blok öğesi, neden "genişlik" uygulanacak? Düğme satır içi öğe gibi görünüyor değil mi? Tüm html öğesinin varsayılan "görüntüleme" özelliklerini gösteren herhangi bir belge var mı?

— GMsoF

14

Etiket olarak ayarlanmış olması gerekir display:blockbunun bir satır içi unsurdur ve genişlik göz ardı eder şekilde.

yani:

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

ve sonra:

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

— Aaron Powell
kaynak

Hayır, bunun işe yaradığını düşünmüyorum. "bir şey" bir sonraki satıra gider. Ve eksik bir "<" var

— user1537366

Dediğim gibi, işe yaramaz! Jsfiddle.net/m156a0qp adresini kontrol edin. Ayrıca, tüm açıklıklı elemanların CSS'sini karıştırmak asla iyi değildir!

— user1537366

4

<style type="text/css">

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

</style>

Satır içi öğelere genişlik atamak için bu yöntemi yapabilirsiniz

— Augustus Francis
kaynak

2

Bu durumda insanlar span bir blok elemanı olamaz çünkü li elemanları arasındaki metnin geri kalanı aşağı inecektir. Ayrıca şamandıra kullanmak da çok kötü bir fikir çünkü tüm li elemanı için genişlik ayarlamanız gerekecek ve bu genişliğin tüm ul elemanının veya diğer kabın genişliği ile aynı olması gerekecektir.

Html'de böyle bir şey deneyin:

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

ve css'de

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

yani, li öğesi göreceli olduğunda, span öğesini mutlak ve üstte olacak şekilde biçimlendirirsiniz: 0; left: 0; böylece sol üstte kalır ve span öğesi için bu boş alanı ayarlamak için dolgu soluna (veya: dolgu: 0px 0px 0px 80px;) ayarlanır.

Basit durumlar için daha iyi çalışmalıdır.

— arturro
kaynak

1

bunu dene

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

— Rahmad Saleh
kaynak

1

HTML 5.0 kullanarak, veya kullanarak metin bloğunun genişliğini düzeltmek mümkündür <div>.

Çünkü önemli olan aşağıdaki CCS satırını eklemektir.

display: inline-block;

Boşluğunuz için önemli olan  alan eklemektir .

Kodum takip ediyor

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>

Snippet'i genişlet

Not: tabSınıfı tanımladım çünkü ul li spanCSS seçici bilgisayarımda çalışmıyor!

— schlebe
kaynak

bir & nbsp; ekleme benim için işe yarayan şeydi!

— adrien le coarer

0

Bir tablo kullanarak yapabilirsiniz, ancak saf CSS değildir.

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

Her seçenekte çizgi değiştirdiğinden tam olarak istediğiniz gibi görüntülenmediğine dikkat edin. Ancak, bunun cevaba yaklaşmanıza yardımcı olacağını umuyorum.

— luiscubal
kaynak

-1

Her zaman kaba kuvvet yöntemi vardır:

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

Yoksa metni "doldurmak" ile kastettiğin bu mu? Bu, bu bağlamda belirsiz bir çalışma.

Bu bir tür ev ödevi sorusuna benziyor. Umarım ödevini senin için yapmaya zorlamıyorsun?

— eaolson
kaynak

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

Snippet'i genişlet

— Pepe Unodostres
kaynak