如何均匀地传播元素（水平）？ [英] How to spread elements evenly (horizonatly)?

问题描述

我在我的网页上有一个固定宽度的 div 容器，并且它包含用于登录的表单元素。在这些元素下面有一个提交按钮，忘记的密码链接等。

这发生在最后一行元素需要的宽度比框提供的少。如何均匀地传播它们？我不想要

• 预设

 
 | A B C | 
 

• 以

b $ b

 
 | A B C | 
 

• 或表格布局

 
 | A | B | C | 
 

我正在寻找一些CSS方法来实现：

 
 | A B C | 
 

这是：

所有元素之间的空格


• 将整个内容集中在第一个或最后一个< > edit：
  这个回答效果最好。我为这样的2或3个元素创建了模板：

   
   div.spread2evenly> div {
   display：inline-block; 
   * display：inline; / *对于IE7 * / 
   zoom：1; / *触发器hasLayout * / 
   width：50％; 
   text-align：center; 
  } 
   

  
  

  解决方案

  试试这个（ http://jsfiddle.net/BYEw5/ ）：

   < div class =container> 
  < div> A< / div>< div> B< / div>< div> C< / div> 
  < / div> 
   
   .container> div {
   display：inline-block; 
   display：-moz-inline-box; 
   * display：inline; / *对于IE7 * / 
   zoom：1; / *触发器hasLayout * / 
   width：33％; 
   text-align：center; 
  } 
    

  因为你处理的是inline-block，

  有关内联阻止问题的更多信息： http：//blog.another-d- mention.ro/programming/cross-browser-inline-block/ ， http://www.aarongloege.com/blog/web-development/css/cross-browser-inline-block/ 。您还可能需要添加 display：-moz-inline-box; 。
  
  
  

  
  此外，33％* 3不是100％。如果你真的想要100％而不介意 div 之间的一些空格，你可以这样做：

    .container> div {
   display：inline-block; 
   display：-moz-inline-box; 
   * display：inline; / *对于IE7 * / 
   zoom：1; / *触发hasLayout * / 
   margin-left：2％; 
   width：32％; 
   text-align：center; 
  } 
   
   .container> div：first-child {
   margin-left：0; 
  } 
    

  
  

  I have a div container on my web page with fixed width and it contains form elements for logging in. Below these elements there are a submit button, forgotten password link etc.

  It happens the last line elements need fewer width than the box provides. How to spread them evenly? I don't want

  • default

  | A B C           |
  

  • centering the line like

  |      A B C      |
  

  • nor table layout

  |  A  |  B  |  C  |
  

  
  Instead I am looking for some CSS way to achieve:

  |  A    B    C  |
  

  That is:

  • put about equal space between all elements
  • center the whole thing to avoid the first or last to the side

  edit: This answer worked best. I created templates for 2 or 3 elements like this:

  div.spread2evenly > div {
      display: inline-block;
      *display: inline; /* For IE7 */
      zoom: 1; /* Trigger hasLayout */
      width: 50%;
      text-align: center;
  }
  

  解决方案

  Try this (http://jsfiddle.net/BYEw5/):

  <div class="container">
    <div>A</div><div>B</div><div>C</div>
  </div>
  
  .container > div {
      display: inline-block;
      display: -moz-inline-box;
      *display: inline; /* For IE7 */
      zoom: 1; /* Trigger hasLayout */
      width: 33%;
      text-align: center;
  }
  

  Since you're dealing with inline-block, you can't have spaces between the tags (ugly, but it works), otherwise the space will be visible.

  Edit 1: Here is some more info on the inline-block issues: http://blog.another-d-mention.ro/programming/cross-browser-inline-block/, http://www.aarongloege.com/blog/web-development/css/cross-browser-inline-block/. You may also have to add display: -moz-inline-box;.

  Edit 2: Also, 33%*3 is not 100%. If you truly want 100% and don't mind some space between the divs you could do:

  .container > div {
      display: inline-block;
      display: -moz-inline-box;
      *display: inline; /* For IE7 */
      zoom: 1; /* Trigger hasLayout */
      margin-left: 2%;
      width: 32%;
      text-align: center;
  }
  
  .container > div:first-child {
      margin-left: 0;
  }
  

  这篇关于如何均匀地传播元素（水平）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！