Cách tốt nhất để quản lý khoảng trắng giữa các mục danh sách inline

HTML của tôi là như sau:Cách tốt nhất để quản lý khoảng trắng giữa các mục danh sách inline

<ul id="nav"> 
    <li><a href="./">Home</a></li> 
    <li><a href="/About">About</a></li> 
    <li><a href="/Contact">Contact</a></li> 
</ul>

Và css của tôi:

#nav { 
    display: inline; 
}

Tuy nhiên, khoảng trắng giữa li cho thấy lên. Tôi có thể xóa khoảng trắng bằng cách thu gọn khoảng trắng như vậy:

<ul id="nav"> 
    <li><a href="./">Home</a></li><li><a href="/About">About</a></li><li><a href="/Contact">Contact</a></li> 
</ul>

Nhưng điều này đang được duy trì chủ yếu bằng tay và tôi đã tự hỏi liệu có cách nào làm sạch hơn không.

Nguồn

2008-10-27 Anonymous

Một số tùy chọn ở đây, đầu tiên tôi sẽ cung cấp cho bạn thực hành bình thường của tôi khi tạo danh sách inline:

<ul id="navigation"> 
    <li><a href="#" title="">Home</a></li> 
    <li><a href="#" title="">Home</a></li> 
    <li><a href="#" title="">Home</a></li> 
</ul>

Sau đó, CSS để làm cho nó có chức năng như bạn có ý định:

#navigation li 
    { 
    display: inline; 
    list-style: none; 
    } 
#navigation li a, #navigation li a:link, #navigation li a:visited 
    { 
    display: block; 
    padding: 2px 5px 2px 5px; 
    float: left; 
    margin: 0 5px 0 0; 
    }

Rõ ràng tôi rời ra các tập tin di chuột và hoạt động, nhưng điều này tạo ra một điều hướng mức khối tốt đẹp, và là một phương pháp rất phổ biến để làm điều này trong khi vẫn giữ với các tiêu chuẩn./* hãy nhớ chỉnh sửa theo ý thích của bạn, thêm màu vào nền, v.v./

Nếu bạn muốn giữ nó chỉ với văn bản và nội tuyến, không có yếu tố khối nào tôi cho rằng bạn muốn thêm:

margin: 0 5px 0 0; /* that's, top 0, right 5px, bottom 0, left 0 */

Nhận ra bạn muốn loại bỏ khoảng trắng, chỉ cần điều chỉnh lề/đệm phù hợp.

Nguồn

2008-10-27 21:58:17 thismat

Không có đủ đại diện để tự mình chỉnh sửa, nhưng "#navigation ul li" trong CSS của bạn sẽ được thay thế bất cứ nơi nào nó xuất hiện bởi "#navigation li". –

Hoàn toàn bỏ lỡ điều đó, sẽ cập nhật nó, cảm ơn. – thismat

'float: left;' đã lưu lại ngày! Vậy nguyên nhân của không gian trắng ảo này là gì? Có ai biết không? –

Điều bạn thực sự muốn là CSS3 white-space-collapse: discard. Nhưng tôi không chắc liệu bất kỳ trình duyệt nào có thực sự hỗ trợ thuộc tính đó hay không.

Một vài giải pháp thay thế là cho phép đuôi kết thúc của thẻ tiêu thụ khoảng trắng. Ví dụ:

<ul id="nav" 
    ><li><a href="./">Home</a></li 
    ><li><a href="/About">About</a></li 
    ><li><a href="/Contact">Contact</a></li 
></ul>

Một điều tôi đã nhìn thấy thực hiện là sử dụng ý kiến HTML để tiêu thụ khoảng trắng

<ul id="nav"><!-- 
    --><li><a href="./">Home</a></li><!-- 
    --><li><a href="/About">About</a></li><!-- 
    --><li><a href="/Contact">Contact</a></li><!-- 
--></ul>

giải pháp

Xem thismat nếu bạn là okay sử dụng phao nổi, và tùy theo yêu cầu bạn có thể cần để thêm một đường nhỏ <li> được đặt thành clear: both;.

Nhưng thuộc tính CSS3 có lẽ là cách lý thuyết nhất tốt nhất.

Nguồn

2010-06-29 18:05:28

Điều này thực sự có sức mạnh và không cần thiết. – mahalie

Cảm ơn vì điều này tôi cần phải tránh phao trái và điều này cho phép tôi làm như vậy. – Rob

Một cách hữu ích khác để loại bỏ khoảng trắng là đặt thuộc tính font-size của danh sách thành 0 và các thành phần của danh sách trở lại kích thước được yêu cầu.

Nguồn

2010-09-01 10:57:53

Nếu bạn cần căn giữa danh sách chặn nội tuyến (nghĩa là float không thực sự là một tùy chọn), điều này thật tuyệt vời. Cảm ơn – Djave

Phương pháp này dường như có sự cố trên trình duyệt Android - Nghiên cứu: http://codepen.io/stowball/details/LsICH –

Áp dụng HTML không dựa trên XML và bỏ qua </li>.

<ul id="nav"> 
    <li><a href="./">Home</a> 
    <li><a href="/About">About</a> 
    <li><a href="/Contact">Contact</a> 
</ul>

Sau đó đặt thuộc tính hiển thị của các mục thành chặn nội dòng thay vì nội tuyến.

#nav li { 
    display: inline-block; 
    /display: inline; /* for IE 6 and IE 7 */ 
    /zoom: 1; /* for IE 6 and IE 7 */ 
}

Nguồn

2011-01-31 09:29:58 guimihanui

Một giải pháp tốt hơn cho các hạng mục danh sách là sử dụng:

#nav li{float:left; width:auto;}

Có chính xác hiệu ứng hình ảnh tương tự mà không có sự đau đầu.

Nguồn

2011-08-05 14:55:21 Louisa

<html> 
<head> 
<style> 
ul li, ul li:before,ul li:after{display:inline; content:' '; } 
</style> 
</head> 
<body> 
<ul><li>one</li><li>two</li><li>three</li></ul> 
<ul> 
    <li>one</li> 
    <li>two</li> 
    <li>three</li> 
</ul> 
</body> 
</html>

Nguồn

2013-01-30 06:41:26 user2024227

Vấn đề là kích thước phông chữ trong UL. Đặt nó thành 0 và nó sẽ biến mất, nhưng bạn không muốn bạn đặt văn bản thực tế quá nhỏ, vì vậy sau đó đặt kích thước phông chữ LI của bạn thành bất kỳ thứ gì bạn muốn.

<ul style="font-size:0px;"> 
<li style="font-size:12px;"> 
</ul>

Nguồn

2013-06-04 02:00:26 user764728

Tôi gặp vấn đề tương tự và không giải pháp nào ở trên có thể khắc phục được. Nhưng tôi phát hiện ra điều này làm việc cho tôi:

Thay vì điều này:

<ul id="nav"> 
    <li><a href="./">Home</a></li> 
    <li><a href="/About">About</a></li> 
    <li><a href="/Contact">Contact</a></li> 
</ul>

xây dựng mã của bạn html như thế này (khoảng trắng trước và sau khi văn bản liên kết):

<ul id="nav"> 
    <li><a href="./"> Home </a></li> 
    <li><a href="/About"> About </a></li> 
    <li><a href="/Contact"> Contact </a></li> 
</ul>

Nguồn

2014-10-10 20:16:20 micha

Tại sao bỏ phiếu xuống? Nó hoạt động tốt và theo ý kiến của tôi đó là hackaround ít đau đớn nhất. – micha

sau nhiều giờ tìm kiếm giải pháp đơn giản. Cảm ơn @micha – Prabhakaran

Cách tốt nhất để quản lý khoảng trắng giữa các mục danh sách inline

Trả lời

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