CSS菜单，按钮等可以左右对齐_Css_Internet Explorer

CSS菜单，按钮等可以左右对齐

css internet-explorer

CSS菜单，按钮等可以左右对齐,css,internet-explorer,Css,Internet Explorer,我需要制作以下菜单，但我不知道如何使用CSS将按钮左右对齐，这样它也能在IE中工作。菜单也应该有固定的高度，但这似乎会引起一些问题 |Button1|Button2|-----------------------------------------------|Button3| |table here ------------------------------------------------------------| |Button1|Button2|-----------------

我需要制作以下菜单，但我不知道如何使用CSS将按钮左右对齐，这样它也能在IE中工作。菜单也应该有固定的高度，但这似乎会引起一些问题

|Button1|Button2|-----------------------------------------------|Button3|

|table here ------------------------------------------------------------|

|Button1|Button2|-----------------------------------------------|Button3|

使用一个表来实现这一点要容易得多，为什么还要使用CSS呢

<table>
 <tr>
     <td width="10%" align="left">Button1</td>
     <td width="10%" align="left">Button2</td>
     <td width="80%" align="right">Button3</td>
 </tr>
 <tr>
     <td colspan="3">
        ..inner table..
     </td>
 </tr>
 <tr>
     <td width="10%" align="left">Button1</td>
     <td width="10%" align="left">Button2</td>
     <td width="80%" align="right">Button3</td>
 </tr>


按钮1
按钮2
按钮3
…内桌。。
按钮1
按钮2
按钮3

如果你真的想用CSS来实现它，试试下面的方法

<div style="width:400px;">   
   <div style="display:inline; float:left;">Button1</div>   
   <div style="display:inline; float:left;">Button2</div>   
   <div  style="display:inline; float:right;">Button3</div>
</div>

 ... etc


按钮1
按钮2
按钮3
... 等

CSS：

HTML:

.
.


按钮1
按钮2
按钮3
.左{
浮动：左；
}
.对{
浮动：对；
}

为什么不使用float属性

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Menu</title>
    <style>
        .menu { background:blue;}
        .lbutton {
            background:green;
            float:left;
        }
        .rbutton {
            background:red;
            float:right;
        }
    </style>
  </head>
  <body>
    <h1>Object test</h1>
    <div class="menu">
        <div class="lbutton">button 1</div>
        <div class="lbutton">button 2</div>
        <div class="rbutton">button 3</div>    
    </div>    
  </body>
</html>


菜单
.menu{背景：蓝色；}
布顿先生{
背景：绿色；
浮动：左；
}
布顿先生{
背景：红色；
浮动：对；
}
对象测试
按钮1
按钮2
按钮3

如果强制元素具有hidden

hasLayout

属性，则可以使用CSS和IE执行此操作：

<style>
/* allow buttons to display on the same line */
.menu-button { display:inline-block; }

/* make button float on the right */
.menu-button-right { position:relative; display:block; float:right; }
</style>

<div>   
   <div class="menu-button">Button1</div>   
   <div class="menu-button">Button2</div>   
   <div class="menu-button-right">Button3</div>
</div>


/*允许按钮显示在同一行上*/
.菜单按钮{显示：内联块；}
/*使按钮在右侧浮动*/
.menu按钮右{位置：相对；显示：块；浮动：右；}
按钮1
按钮2
按钮3

+1尽管我们被告知不要使用表格。。。这是一个清晰的概念，可以合理地使用它们。我看到CSS的一个普遍问题是保持列宽。固定的设计很简单，但是表格实际上给了你更多的灵活性。这很好，但是我在IE7中遇到了问题。菜单按钮是右边的，因为如果我有左边的元素，那么它会从菜单中掉下来。。。在Firefox和其他浏览器中，这一切正常，但IE7似乎有一个奇怪的问题…IE通常会这样做-如果你对这种布局有问题，绝对替代方案有时在IE中效果更好。将包装div更改为position:relative，然后更改。菜单按钮右键为{position:absolute；top:0；right:0；}。另一个选项是首先使用float:right元素。

<div class="wrapper">
  <div class="left">
    Button1
  </div>
  <div class="left">
    Button2
  </div>
  <div class="right">
    Button3
  </div>
</div>
<style type="text/css">
.left{
  float:left;
}
.right{
  float: right;
}
</style>

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Menu</title>
    <style>
        .menu { background:blue;}
        .lbutton {
            background:green;
            float:left;
        }
        .rbutton {
            background:red;
            float:right;
        }
    </style>
  </head>
  <body>
    <h1>Object test</h1>
    <div class="menu">
        <div class="lbutton">button 1</div>
        <div class="lbutton">button 2</div>
        <div class="rbutton">button 3</div>    
    </div>    
  </body>
</html>

<style>
/* allow buttons to display on the same line */
.menu-button { display:inline-block; }

/* make button float on the right */
.menu-button-right { position:relative; display:block; float:right; }
</style>

<div>   
   <div class="menu-button">Button1</div>   
   <div class="menu-button">Button2</div>   
   <div class="menu-button-right">Button3</div>
</div>