居中使用CSS的宽度相等的表格式布局？ [英] Centered table-like layout with columns of equal widths using CSS?

问题描述

• 这行按钮应该居中在页面上
  在网页上，我有一排提交按钮。 li>
  
• 每个按钮应该与最宽按钮一样宽（即没有固定/硬编码的按钮宽度）。
  
  
  

  这很容易通过< table> 来完成，但是当人们一直告诉我那些对你不好时，我想知道这是否可以用CSS来完成。所以，我已经尝试了 display：table 和 table-cell CSS类，但是按钮没有得到等宽，或者最长的按钮的标题被​​剪切：
  
  

    .button-row {
   display：table; 
   margin：auto; 
   table-layout：fixed; 
  } 
   .button-row按钮{
   white-space：nowrap; 
   display：table-cell; 
  宽度：50％; 
  } 
   
  < div class =button-row> 
  <按钮>短标题< /按钮> 
  <按钮>更长的标题< /按钮> 
  < / div> 
    

  
  
  实际上，它在IE中看起来是正确的，但不是在 Chrome和Firefox 中。下面是我的表和CSS尝试的小提琴：
  

  http://jsfiddle.net/kfwhpre8/

  
  
  

  如果可能的话，我想摆脱宽度：50％设置，因为按钮的数量可能会有所不同，但这很容易计算。 看看你的小提琴，请记住，在表格版本中，按钮包含在 td s中。这是问题的实质。它出现在按钮上直接使用 table-cell 是有问题的。如果您不介意改变HTML，您可以尝试：
  
  

   < div class =button-row> 
  < div> 
  <按钮>短标题< /按钮> 
  < / div> 
  < div> 
  <按钮>更长的标题< /按钮> 
  < / div> 
  < / div> 
   
   
   .button-row {
   display：table; 
   margin：auto; 
   table-layout：fixed; 
  } 
   
   .button-row> div {
   display：table-cell; 
  宽度：50％; 
  } 
   
  。按钮行按钮{
   width：100％; 
  } 
    

  小提琴

  
  

  On a web page, I have a row of submit buttons.

  • This row of buttons should be centered on the page
  • Each button should be as wide as the widest button (i.e no fixed/hard-coded button widths).

  This is easily done with a <table>, but as people keep telling me those are bad for you, I wondered if this can be done with CSS instead. So, I have tried the display: table and table-cell CSS classes, but either the buttons don't get equal widths, or the longest button's caption gets clipped:

  .button-row {
      display: table;
      margin: auto;
      table-layout: fixed;
  }
  .button-row button {
      white-space: nowrap;
      display: table-cell;
      width: 50%;
  }
  
  <div class="button-row" >
      <button>Short caption</button>
      <button>A much longer caption</button>
  </div>
  

  Actually, it does look correct in IE, but not in Chrome and Firefox. Here is a fiddle with both my table- and CSS-attempt:

  http://jsfiddle.net/kfwhpre8/

  If possible, I would like to get rid of the width: 50% settings, because the number of buttons may vary, but that's easy enough to calculate.

  解决方案

  Looking at your fiddle, keep in mind that in the table version the buttons are contained in tds. This is the essence of the problem. It appears using table-cell on buttons directly is problematic. If you don't mind chaniging your HTML you can try:

  <div class="button-row">
      <div>
          <button>Short caption</button>
      </div>
      <div>
          <button>A much longer caption</button>
      </div>
  </div>
  
  
  .button-row {
      display: table;
      margin: auto;
      table-layout: fixed;
  }
  
  .button-row>div {
      display: table-cell;
      width: 50%;
  }
  
  .button-row button {
      width:100%;
  }
  

  Fiddle

  这篇关于居中使用CSS的宽度相等的表格式布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！