表單元格寬度不工作我沒有料到

我有一個順序列表，像這樣：表單元格寬度不工作我沒有料到

<div class="content-tabs fixed-tabs"> 
     <ul class="tabs"> 
      <li><a>Terms of Use</a></li> 
      <li><a>Privacy Policy long long description</a></li> 
     </ul> 
    </div>

我試圖做的事情：

1維護平等尺寸突出;和2約束每個標籤的最大尺寸

請原諒代碼 - 我目前正在試驗。這裏是主要的兩行 - 正如你所看到的，我正在使用一個表格來使單元對齊工作。

.tabs { 
    display: table; 
} 

.tabs li 
{ 
    display: table-cell; 
}

下面是我目前使用的東西。這幾乎做我想要的。

輸出 - 通知在兩個標籤微胖：

enter image description here

上單個文本行正確的輸出 - 最寬的標籤

enter image description here 上通知缺少填充的兩個選項卡是相等的最大寬度在下面的代碼中設置爲26.4rem - 這是受到尊重的

但是，有一些小錯誤。當文本達到最大寬度並且在長描述的情況下包裝時，寬度保持在26.4rem，這不一定是正確的。其原因不是因爲包裝，第1行的單詞通常小於26.4rem - 它們的寬度可能是25rem，24rem或其他，所以在任何一方都有一些額外的填充。

我需要知道的是，我可以讓這些表格單元在包裝文本時收縮包裝，但仍然給它們一個最大寬度？

.tabs { 
    display: table; 
} 

.tabs li 
{ 
    display:table-cell; 
    height:4.8rem; 
    min-width:16rem; 
    overflow:hidden; 
    vertical-align:middle; 
    width:26.4rem; 
} 

.tabs li a 
{ 
     display:block; 
     max-height:2.8rem; 
     overflow:hidden; 
     text-align:center; 
}

來源

2015-06-02 John Ohara

你需要顯示編譯CSS請。 – Aaron

該代碼已被編輯，現在應該代表編譯的CSS –

@JohnOhara是已知的表格單元的數量？ – Stickers

我假設你只有2個表格單元。在單元格上使用百分比width:50%應使其工作。

JsFiddle Demo

.tabs { 
 
    display: table; 
 
    padding: 0; 
 
    margin: 0; 
 
    border-collapse: collapse; 
 
} 
 
.tabs li { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    border: 1px solid red; 
 
    width: 50%; 
 
    padding: 10px; 
 
}

<ul class="tabs"> 
 
    <li><a>Terms of Use</a></li> 
 
    <li><a>Privacy Policy long long description</a></li> 
 
</ul> 
 

 
<br/><br/> 
 

 
<ul class="tabs"> 
 
    <li><a>Terms of Use</a></li> 
 
    <li><a>Privacy Policy</a></li> 
 
</ul>

來源

2015-06-02 17:57:54 Stickers

表單元格寬度不工作我沒有料到

回答

相關問題