本文介绍了如何将元素平均水平分布?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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

  • 默认

| A B C           |

  • 使线条居中
  • 
    |      A B C      |
    

    • 也不是表格布局
    • 
      |  A  |  B  |  C  |
      


      相反,我正在寻找实现的CSS方法:


      Instead I am looking for some CSS way to achieve:

      
      |  A    B    C  |
      

      也就是说:

      • 关于所有元素之间的间距相等
      • 将整个内容居中,避免第一侧或最后侧向一侧

      修改:此答案效果最好.我为2或3个元素创建了模板,如下所示:

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

      推荐答案

      尝试一下( 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.

      修改1:以下是有关内联代码块问题的更多信息: 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;.

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

      修改2:另外,33%* 3并非100%.如果您确实希望100%且不介意div之间的间距,则可以执行以下操作:

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

      这篇关于如何将元素平均水平分布?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-31 03:12