CSS chiều rộng cố định trong một khoảng

381

Trong một danh sách không có thứ tự:

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

Thêm một thuộc tính lớp hoặc kiểu được cho phép nhưng đệm văn bản và thêm hoặc thay đổi thẻ không được phép.

Trang được kết xuất với Courier New.

Mục tiêu là có văn bản sau khi xếp hàng.

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

Biện minh cho "HOẶC" là không quan trọng.

Văn bản động vật lười biếng có thể được bọc trong một yếu tố bổ sung nhưng tôi sẽ phải kiểm tra lại.

html css

— jason saldo
nguồn

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>

Mở rộng đoạn trích

Giống như Eoin đã nói, bạn cần đặt một không gian không phá vỡ vào các khoảng "trống" của mình, nhưng bạn không thể chỉ định chiều rộng cho một phần tử nội tuyến, chỉ đệm / lề để bạn có thể làm cho nó nổi để bạn có thể cho nó một chiều rộng.

Để biết ví dụ về jsfiddle, hãy xem http://jsfiddle.net/laurensrietveld/JZ2Lg/

— Stephen Caldwell
nguồn

1

là một thành phần nội tuyến theo mặc định - và nổi nó sẽ không cho nó chiều rộng.

— codeinthehole

56

Thuộc tính float tạo ra một "hộp khối" có chiều rộng.

— Stephen Caldwell

83

Nên nó diplay: inline-block; width: 32px;sẽ làm trong hầu hết các trình duyệt hiện đại.

— Paulo Bueno

2

@Randy Marsh - không, thuộc tính chiều rộng chỉ có hiệu lực vì thuộc tính float thay đổi thành phần thành hiển thị khối, như Stephen Caldwell mô tả ở trên.

— codeinthehole

14

@PauloBueno bạn có thể thay đổi diplayđể đọc display, BTW, nó hoạt động với tôi. cảm ơn

— basarat

507

Trong một thế giới lý tưởng, bạn sẽ đạt được điều này chỉ bằng cách sử dụng css sau

<style type="text/css">

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

</style>

Điều này hoạt động trên tất cả các trình duyệt ngoài FF2 trở xuống.

Firefox 2 trở xuống không hỗ trợ giá trị này. Bạn có thể sử dụng -moz-inline-box, nhưng lưu ý rằng nó không giống như khối nội tuyến và nó có thể không hoạt động như bạn mong đợi trong một số trường hợp.

Trích dẫn từ quirksmode

— codeinthehole
nguồn

1

@NicholasPickering .. làm thế nào về wkhtmltopdf?

— codeinthehole

Hừm, không chắc lắm. Đó chỉ là một thất bại nhỏ. Cuối cùng phải sử dụng bảng để có được hiệu quả mong muốn.

— Nicholas Pickering

Chà, tôi có thể giới thiệu wkhtmltopdf nếu bạn cần thứ gì đó tuân thủ CSS3.

— codeinthehole

7

Trong khi đó, 10 năm sau, đây chắc chắn là con đường để đi.

— vog

19

Thật không may, các phần tử nội tuyến (hoặc các phần tử có hiển thị: nội tuyến) bỏ qua thuộc tính chiều rộng. Bạn nên sử dụng div nổi thay thế:

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

Bây giờ tôi thấy bạn cần sử dụng các nhịp và danh sách, vì vậy chúng tôi cần viết lại điều này một chút:

<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
nguồn

3

Đó là một giải pháp tuyệt vời. Các div nổi bắt chước hành vi dự định của các nhịp khi chúng xếp hàng theo chiều ngang. Điều quan trọng cần nhớ là rõ ràng: cả hai ngắt dòng. Đó là một cách tuyệt vời để tránh các bảng trong bối cảnh này.

— artur

Tôi không hiểu, nút là phần tử nội tuyến hoặc khối nội tuyến, tại sao "chiều rộng" sẽ áp dụng cho nó? Nút có vẻ như là một yếu tố nội tuyến phải không? Có tài liệu nào hiển thị các thuộc tính "hiển thị" mặc định của tất cả các phần tử html không?

— GMsoF

14

Các thẻ sẽ cần phải được thiết lập đểdisplay:block vì nó là một yếu tố nội tuyến và sẽ bỏ qua chiều rộng.

vì thế:

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

và sau đó:

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

— Aaron Powell
nguồn

Không, tôi không nghĩ rằng nó hoạt động. "Một cái gì đó" đi đến dòng tiếp theo. Và còn thiếu "<"

— user1537366 8/2/2015

Như tôi đã nói, nó KHÔNG hoạt động! Kiểm tra jsfiddle.net/m156a0qp . Ngoài ra, không bao giờ tốt khi can thiệp vào CSS của tất cả các yếu tố nhịp!

— dùng1537366

4

<style type="text/css">

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

</style>

Bạn có thể thực hiện phương pháp này để gán chiều rộng cho các phần tử nội tuyến

— Augustus Phanxicô
nguồn

2

Mọi người trong trường hợp này không thể là một phần tử khối vì phần còn lại của văn bản ở giữa các phần tử li sẽ đi xuống. Ngoài ra sử dụng float là ý tưởng rất tệ bởi vì bạn sẽ cần đặt chiều rộng cho toàn bộ phần tử li và chiều rộng này sẽ cần giống với chiều rộng của toàn bộ phần tử ul hoặc vùng chứa khác.

Hãy thử một cái gì đó như thế này trong 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>

và trong 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

vì vậy, khi phần tử li tương đối, bạn định dạng phần tử span là tuyệt đối và ở trên cùng: 0; left: 0; vì vậy nó vẫn ở phía trên bên trái và bạn đặt phần đệm bên trái (hoặc: padding: 0px 0px 0px 80px;) để đặt không gian trống này cho phần tử span.

Nó sẽ làm việc tốt hơn cho các trường hợp đơn giản.

— Arturro
nguồn

1

thử cái này

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

— Bán hàng
nguồn

1

Sử dụng HTML 5.0, có thể sửa chiều rộng của khối văn bản bằng cách sử dụng hoặc <div>.

Đối với , điều quan trọng là thêm dòng CCS sau

display: inline-block;

Đối với trống của bạn, điều quan trọng là thêm  không gian.

Mã của tôi đang theo dõi

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>

Mở rộng đoạn trích

PS: Tôi đã xác định tablớp vì ul li spanbộ chọn CSS không hoạt động trên PC của tôi!

— schlebe
nguồn

chèn & nbsp; là những gì làm việc cho tôi!

— adrien le coarer

0

Bạn có thể làm điều đó bằng cách sử dụng bảng, nhưng nó không phải là CSS thuần túy.

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

Lưu ý rằng nó không hiển thị chính xác như bạn muốn, bởi vì nó chuyển dòng trên mỗi tùy chọn. Tuy nhiên, tôi hy vọng rằng điều này sẽ giúp bạn đến gần hơn với câu trả lời.

— luiscubal
nguồn

-1

Chà, luôn có phương pháp vũ phu:

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

Hay đó là những gì bạn có nghĩa là "đệm" văn bản? Đó là một công việc mơ hồ trong bối cảnh này.

Điều này nghe giống như một câu hỏi bài tập về nhà. Tôi hy vọng bạn không cố gắng để chúng tôi làm bài tập về nhà cho bạn?

— phục hưng
nguồn

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

Mở rộng đoạn trích

— Pepe Unodostres
nguồn