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 ใหม่

เป้าหมายคือการมีข้อความหลังจากการเรียงแถวกัน

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

การให้เหตุผลของ "OR" นั้นไม่สำคัญ

ข้อความสัตว์ขี้เกียจอาจถูกห่อด้วยองค์ประกอบเพิ่มเติม แต่ฉันจะต้องตรวจสอบอีกครั้ง

html css

— jason saldo
แหล่งที่มา

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>

ขยายตัวอย่างข้อมูล

เช่นเดียวกับ Eoin ที่กล่าวว่าคุณจะต้องใส่ช่องว่างที่ไม่แบ่งลงในช่วง "ว่าง" ของคุณ แต่คุณไม่สามารถกำหนดความกว้างให้กับองค์ประกอบแบบอินไลน์ได้โดยมีการขยาย / เว้นระยะเท่านั้นดังนั้นคุณจะต้องทำให้มันลอยได้ ให้มันกว้าง

สำหรับตัวอย่าง jsfiddle ดูhttp://jsfiddle.net/laurensrietveld/JZ2Lg/

— สตีเฟ่นคาลด์เวลล์
แหล่งที่มา

1

เป็นองค์ประกอบอินไลน์ตามค่าเริ่มต้นและการลอยมันจะไม่ให้ความกว้าง

— codeinthehole

56

คุณสมบัติลอยสร้าง "บล็อกกล่อง" ซึ่งมีความกว้าง

— Stephen Caldwell

83

ควรdiplay: inline-block; width: 32px;จะทำในเบราว์เซอร์ที่ทันสมัยที่สุด

— เปาโลบูเอโน่

2

@Randy Marsh - ไม่คุณสมบัติความกว้างมีผลกระทบเพียงอย่างเดียวเนื่องจากคุณสมบัติการลอยเปลี่ยนองค์ประกอบเป็นจอแสดงผลแบบบล็อกตามที่ Stephen Caldwell อธิบายไว้ข้างต้น

— codeinthehole

14

@ PauloBueno คุณสามารถเปลี่ยนdiplayการอ่านdisplayBTW มันใช้งานได้สำหรับฉัน ขอบคุณ

— basarat

507

ในโลกอุดมคติคุณจะประสบความสำเร็จได้โดยใช้ CSS ต่อไปนี้

<style type="text/css">

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

</style>

สิ่งนี้ใช้ได้กับเบราว์เซอร์ทั้งหมดนอกเหนือจาก FF2 และด้านล่าง

Firefox 2 หรือต่ำกว่าไม่รองรับค่านี้ คุณสามารถใช้ -moz-inline-box แต่โปรดทราบว่ามันไม่เหมือนกับ inline-block และอาจไม่ทำงานอย่างที่คุณคาดไว้ในบางสถานการณ์

อ้างจากquirksmode

— codeinthehole
แหล่งที่มา

1

@NicholasPickering .. แล้ว wkhtmltopdf ล่ะ?

— codeinthehole

อืมไม่แน่ใจ มันเป็นเพียงความปราชัยเล็กน้อย จบลงด้วยการใช้ตารางเพื่อให้ได้ผลตามที่ต้องการ

— Nicholas Pickering

ฉันสามารถแนะนำ wkhtmltopdf หากคุณต้องการบางสิ่งที่สอดคล้องกับ CSS3

— codeinthehole

7

ในขณะเดียวกัน 10 ปีต่อมานี่เป็นวิธีที่จะไปแน่นอน

— vog

19

น่าเสียดายที่องค์ประกอบแบบอินไลน์ (หรือองค์ประกอบที่มีจอแสดงผล: แบบอินไลน์) ละเว้นคุณสมบัติความกว้าง คุณควรใช้ 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>

ตอนนี้ฉันเห็นว่าคุณต้องใช้ช่วงและรายการดังนั้นเราต้องเขียนใหม่อีกหน่อย:

<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
แหล่งที่มา

3

นั่นเป็นทางออกที่ดี divs แบบลอยตัวเลียนแบบพฤติกรรมที่ต้องการของช่วงขณะที่พวกมันอยู่ในแนวนอน สิ่งสำคัญคือต้องจดจำความชัดเจน: การขึ้นบรรทัดใหม่ เป็นวิธีที่ดีในการหลีกเลี่ยงตารางในบริบทนี้

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

— Aaron Powell
แหล่งที่มา

ไม่ฉันไม่คิดว่าจะใช้งานได้ "บางอย่าง" ไปที่บรรทัดถัดไป และมีการหายไป "<"

— user1537366

อย่างที่ฉันบอกไปมันใช้งานไม่ได้! ตรวจสอบjsfiddle.net/m156a0qp out นอกจากนี้มันไม่เคยดีที่จะเข้าไปยุ่งกับ CSS ขององค์ประกอบช่วงทั้งหมด!

— user1537366

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

ควรทำงานได้ดีขึ้นสำหรับกรณีง่าย ๆ

— Arturro
แหล่งที่มา

1

ลองนี้

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

— Rahmad Saleh
แหล่งที่มา

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 ไม่ทำงานบนพีซีของฉัน!

— schlebe
แหล่งที่มา

การแทรก & 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>

โปรดทราบว่ามันไม่ได้แสดงอย่างที่คุณต้องการเพราะมันจะสลับสายในแต่ละตัวเลือก อย่างไรก็ตามฉันหวังว่าสิ่งนี้จะช่วยให้คุณใกล้ชิดกับคำตอบมากขึ้น

— luiscubal
แหล่งที่มา

-1

มีวิธีบังคับดุร้ายอยู่เสมอ:

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

หรือว่าสิ่งที่คุณหมายถึงโดย "padding" ข้อความ? นั่นเป็นงานที่คลุมเครือในบริบทนี้

ฟังดูคล้ายคำถามการบ้าน ฉันหวังว่าคุณจะไม่พยายามให้เราทำการบ้านให้คุณ?

— eaolson
แหล่งที่มา

-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
แหล่งที่มา