CSS - 獲取跨度

，沒有固定的寬度之間

標籤欄，我想每個標籤的寬度根據文本長度（也就是被設定擺脫空間），並在情況下自動換行超過屏幕寬度

我已經幾乎實現了它

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

但是，有易拉環的圖像和關閉一個之間一個非常惱人的空間...

正如你可以看到我已經嘗試填充，間距和邊界，沒有運氣...

- 編輯我試圖用一個小表（一行，三個TD）替換跨度，但它是同樣，只有兩者之間的空間較小...

來源

2010-03-25 opensas

嘗試添加空格：NOWRAP; – ant 2010-03-25 22:36:56

試了一下，它是一樣的... – opensas 2010-03-25 23:18:51

擺脫跨度之間的換行符。示例：

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

換行符在HTML中計爲空格。

來源

2010-03-25 22:38:03 njbair

難以測試沒有圖像，但我添加了背景顏色和顯示：內聯到根標籤。請試試這個：

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

來源

2010-03-25 22:41:15 Cheddar

不錯的嘗試，但空間仍然存在，在第一個選項卡上的紅色和第二個綠色... – opensas 2010-03-25 23:16:57

標籤中間，左邊和右邊也需要向左浮動。

來源

2010-03-25 22:46:54 BigChrisDiD

njbair的回答是正確的。

另一種選擇是使用一個表，border-collapse: collapse;屬性。

另一個問題：在Internet Explorer 6.0中，第一種方法（跨度）無法按預期工作。當調整窗口大小時，IE會纏住跨度，打破選項卡，同時使用表格方法甚至IE向下發送整個選項卡。

來源

2010-03-25 22:56:21 opensas

的另一種方式，除了njbair的一個是增加font-size: 0到父元素。我更喜歡這一款，因爲它對於標籤設計在美學上更好。

取而代之的是：

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

...我們可以利用這一點：

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

...這看起來更好:)

當然，不要忘了定義製表符的真實字體大小。

編輯：
有擺脫空間的另一種方式：通過添加註釋。

實施例：

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

來源

2012-07-11 10:31:09

這應該是公認的答案，因爲它是做什麼的OP是請求。 OP想要跨度之間的空間不被看到，並且接受的答案是從html中刪除它。 – 2014-03-06 11:24:06

@HectorOrdonez人們一直在問meta是否應該有一個社區接受的答案，但它被拒絕了，主要是因爲它是哪個答案適合OP最多而不是社區，但是社區答案是最有利的一個。所以不要打擾哪一個應該是被接受的答案;） – 2014-04-23 07:03:11

好評如潮。很難挑選哪個是兩個弊端中較小的一個：CSS hack需要重複字體大小信息或HTML hack，這就像改變內容以實現所需的樣式。 – 2014-07-17 23:02:44

另一種選擇是使用性否定letter-spacing:-10px - 具有上格式化打火機影響。

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

得到這個想法得益於this answer

來源

2017-09-05 08:23:59 CodeGust

CSS - 獲取跨度

回答

相關問題