css - loại bỏ khoảng trắng giữa các nhịp

Tôi đang cố gắng mô phỏng thanh tab với htmlcss - loại bỏ khoảng trắng giữa các nhịp

Tôi muốn chiều rộng của mỗi tab được đặt theo độ dài văn bản (nghĩa là, không có chiều rộng cố định) và từ bọc trong trường hợp nó vượt quá chiều rộng màn hình

tôi đã gần như đạt được nó

<html> 
<head> 

<style type="text/css"> 
    #myTabs .tab { 
    float: left; 
    } 

    #myTabs .tab_middle { 
     margin: 0; 
     padding: 0; 
     border: none; 
    background-image:url('images/tabs/tab_middle.png'); 
    } 

    #myTabs .tab_left { 
     margin: 0; 
     padding: 0; 
     border: none; 
     background-image:url('images/tabs/tab_left.png'); 
    } 

    #myTabs .tab_right { 
     margin: 0; 
     padding: 0; 
     border: none; 
    background-image:url('images/tabs/tab_right.png'); 
    } 

</style> 

</head> 

<body> 

<div id="myTabs"> 
    <div class='tab'> 
     <span class='tab_left'>&nbsp;</span> 
     <span class='tab_middle'>very very looong</span> 
     <span class='tab_right'>&nbsp;</span> 
    </div> 
    <div class='tab'> 
     <span class='tab_left'>&nbsp;</span> 
     <span class='tab_middle'>another loooong tab</span> 
     <span class='tab_right'>&nbsp;</span> 
    </div> 
    <div style='clear:both'></div> 
</div> 

</body> 
</html>

nhưng, có một không gian rất khó chịu giữa hình ảnh tab mở và đóng một ...

Như bạn có thể thấy tôi đã thử với đệm, khoảng cách và đường viền, không có may mắn ...

- chỉnh sửa Tôi đã thử thay thế các nhịp bằng một bảng nhỏ (một hàng, ba TD) nhưng đó là giống nhau, chỉ khoảng cách giữa nhỏ hơn ...

Nguồn

2010-03-25 opensas

thử thêm white-space: nowrap; – ant

đã thử nó, nó giống nhau ... – opensas

Loại bỏ các dòng mới giữa các nhịp. Ví dụ:

<div class='tab'> 
    <span class='tab_left'>&nbsp;</span><span class='tab_middle'>very very looong</span><span class='tab_right'>&nbsp;</span> 
</div>

Dòng mới được tính là khoảng trắng trong HTML.

Nguồn

2010-03-25 22:38:03 njbair

khó kiểm tra mà không có hình ảnh nhưng tôi đã thêm màu nền và hiển thị: nội tuyến vào các tab gốc. Vui lòng thử điều này:

<html> 
<head> 

<style type="text/css"> 
    #myTabs .tab { 
     float: left; 
     display:inline; 
    } 

    #myTabs .tab_middle { 
     margin: 0; 
     padding: 0; 
     border: none; 
    background-image:url('images/tabs/tab_middle.png'); 
    } 

    #myTabs .tab_left { 
     margin: 0; 
     padding: 0; 
     border: none; 
     background-image:url('images/tabs/tab_left.png'); 
    } 

    #myTabs .tab_right { 
     margin: 0; 
     padding: 0; 
     border: none; 
    background-image:url('images/tabs/tab_right.png'); 
    } 

</style> 

</head> 

<body> 

<div id="myTabs"> 
    <div class='tab' style="background-color:Red;"> 
     <span class='tab_left'>&nbsp;</span> 
     <span class='tab_middle'>very very looong</span> 
     <span class='tab_right'>&nbsp;</span> 
    </div> 
    <div class='tab' style="background-color:Green;"> 
     <span class='tab_left'>&nbsp;</span> 
     <span class='tab_middle'>another loooong tab</span> 
     <span class='tab_right'>&nbsp;</span> 
    </div> 
    <div style='clear:both'></div> 
</div> 

</body> 
</html>

Nguồn

2010-03-25 22:41:15 Cheddar

thử đẹp, nhưng không gian vẫn còn đó, màu đỏ trên tab đầu tiên và màu xanh lá cây trên thứ hai ... – opensas

Tab ở giữa, bên trái và bên phải cũng cần để nổi bên trái.

Nguồn

2010-03-25 22:46:54 BigChrisDiD

phản hồi của njbair là chính xác.

Một tùy chọn khác là sử dụng bảng, với thuộc tính border-collapse: collapse;.

Bíp khác: trong Internet Explorer 6.0, cách tiếp cận đầu tiên (kéo dài) không hoạt động như mong đợi. Khi thay đổi kích thước cửa sổ, IE wordwraps span, phá vỡ các tab, trong khi với cách tiếp cận bảng ngay cả IE gửi xuống toàn bộ tab.

Nguồn

2010-03-25 22:56:21 opensas

Một cách khác bên cạnh một njbair 's là thêm font-size: 0 đến yếu tố phụ huynh. Tôi thích cái này vì nó mang tính thẩm mỹ tốt hơn cho thiết kế tab.

Thay vì điều này:

<div id="tabs"> 
    <span id="mytab1">Tab 1</span><span id="mytab2">Tab 2</span><span id="mytab3">Tab 3</span> 
</div>

... chúng ta có thể sử dụng này:

<div id="tabs" style="font-size: 0;"> 
    <span id="mytab1">Tab 1</span> 
    <span id="mytab2">Tab 2</span> 
    <span id="mytab3">Tab 3</span> 
</div>

... trông tốt hơn :)

Tất nhiên, đừng quên xác định kích thước phông chữ thực của bạn cho các tab.

EDIT:
Có một cách khác để loại bỏ khoảng trắng: bằng cách thêm nhận xét.

Ví dụ:

<div id="tabs"> 
    <span id="mytab1">Tab 1</span><!-- 
    --><span id="mytab2">Tab 2</span><!-- 
    --><span id="mytab3">Tab 3</span> 
</div>

Nguồn

2012-07-11 10:31:09

Đây phải là câu trả lời được chấp nhận, vì nó làm những gì OP là yêu cầu. OP muốn không gian giữa các nhịp không được nhìn thấy và câu trả lời được chấp nhận chỉ là xóa nó khỏi html. –

@HectorOrdonez Mọi người đã hỏi về meta nếu có một cộng đồng chấp nhận câu trả lời, nhưng nó đã bị từ chối, chủ yếu bởi vì nó là câu trả lời phù hợp nhất với OP chứ không phải cộng đồng, một câu trả lời của cộng đồng là câu trả lời nhiều nhất. Vì vậy, không bận tâm về câu trả lời được chấp nhận;) –

Mẹo hay về nhận xét. Khó để chọn cái nào là ít hơn của hai tệ nạn: CSS hack đòi hỏi phải sao chép thông tin kích thước phông chữ hoặc HTML hack mà cảm thấy như thay đổi nội dung để đạt được phong cách mong muốn. –

Một lựa chọn khác là sử dụng nagative letter-spacing:-10px - mà có một tác động nhẹ trên định dạng.

<div id="tabs" style="letter-spacing:-10px;"> 
    <span id="mytab1" style="letter-spacing:1px;">Tab 1</span> 
    <span id="mytab2" style="letter-spacing:1px;">Tab 2</span> 
    <span id="mytab3" style="letter-spacing:1px;">Tab 3</span> 
</div>

Got ý tưởng này nhờ this answer

Nguồn

2017-09-05 08:23:59 CodeGust

css - loại bỏ khoảng trắng giữa các nhịp

Trả lời

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