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

321

Trong vòng một danh sách có thứ tự:CSS chiều rộng cố định trong một khoảng thời

<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 lớp hoặc thuộc tính style được phép nhưng đệm các văn bản và thêm hoặc thay đổi các thẻ không được phép.

Trang hiển thị bằng 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.

Việc xác minh "OR" là không quan trọng.

Văn bản động vật lười biếng có thể được gói trong một phần tử bổ sung nhưng tôi sẽ phải kiểm tra kỹ.

Nguồn

2008-11-02 jason saldo

377

ul { 
 
\t list-style-type: none; 
 
\t padding-left: 0px; 
 
} 
 

 
ul li span { 
 
\t float: left; 
 
\t 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>

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

Đối với một ví dụ jsfiddle, xem http://jsfiddle.net/laurensrietveld/JZ2Lg/

Nguồn

2008-11-02 22:55:37

là một yếu tố inline theo mặc định - và nổi nó sẽ không cung cấp cho nó một chiều rộng. – codeinthehole

+54

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

@touqen, css bạn đã cung cấp không cung cấp cho khoảng có chiều rộng bằng nhau trong ff3 hoặc opera 9.51 – codeinthehole

Đáng tiếc là các yếu tố nội tuyến (hoặc các yếu tố có display: inline) bỏ qua thuộc tính chiều rộng. Bạn nên sử dụng divs nổi thay vì:

<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 phải sử dụng nhịp và danh sách, vì vậy chúng tôi cần phải viết lại 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>

Nguồn

2008-11-02 22:56:44

Đó là một giải pháp tuyệt vời. Floating div bắt chước hành vi mong muốn của nhịp khi chúng xếp hàng theo chiều ngang. Điều quan trọng là phải nhớ 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 ngữ cảnh này. – artur

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

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 giúp bạn đến gần hơn với câu trả lời.

Nguồn

2008-11-02 23:00:21 luiscubal

Thẻ <span> sẽ cần phải được đặt thành display:block vì nó là phần tử nội tuyến và sẽ bỏ qua chiều rộng.

vậy:

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

Nguồn

2008-11-02 23:01:05

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

Như tôi đã nói, nó không hoạt động! Kiểm tra http://jsfiddle.net/m156a0qp/ out. Ngoài ra, nó không bao giờ tốt để can thiệp với CSS của tất cả các yếu tố span! – user1537366

nó làm việc cho tôi cảm ơn! – Solano

438

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

<style type="text/css"> 

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

</style>

này hoạt động trên tất cả các trình duyệt ngoài từ 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ư chặn nội tuyến và có thể không hoạt động như bạn mong đợi trong một số trường hợp.

Trích lấy từ quirksmode

Nguồn

2008-11-02 23:27:37 codeinthehole

điều này dường như không hoạt động trên chrome hoặc – arviman

Đáng buồn thay, điều này không làm việc cho DomPDF. –

@NicholasNhấp chuột .. làm thế nào về wkhtmltopdf? – codeinthehole

Vâng, luôn có phương pháp brute force:

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

Hoặc là những gì bạn có nghĩa là bởi "đệ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ư câu hỏi về bài tập về nhà. Tôi hy vọng bạn không muốn chúng tôi làm bài tập về nhà cho bạn?

Nguồn

2008-11-02 23:45:37 eaolson

Phạm vi người trong trường hợp này không thể là phần tử khối vì phần còn lại của văn bản nằm giữa các phần tử li sẽ giảm xuống. Ngoài ra sử dụng float là ý tưởng rất xấu bởi vì bạn sẽ cần phải thiết lập chiều rộng cho toàn bộ phần tử li và chiều rộng này sẽ cần phải được giống như chiều rộng của toàn bộ phần tử ul hoặc container 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

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

Nó sẽ hoạt động tốt hơn cho các trường hợp đơn giản.

Nguồn

2010-04-15 13:39:51 Arturro

<style type="text/css"> 

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

</style>

Bạn có thể làm phương pháp này cho gán chiều rộng cho các yếu tố inline

Nguồn

2013-09-14 21:05:25

thử này

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

Nguồn

2018-02-18 03:45:27

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

Trả lời

Các vấn đề liên quan