Меню CSS, где кнопки и т. Д. Могут быть выровнены влево и вправо - PullRequest
Новая
       16

Меню CSS, где кнопки и т. Д. Могут быть выровнены влево и вправо

2 голосов
/ 05 августа 2009

Мне нужно создать следующий вид меню, но я не знаю, как я могу выровнять кнопки влево и вправо с помощью CSS, чтобы он работал и в IE. Меню также должно иметь фиксированную высоту, но это, кажется, вызывает некоторые проблемы .. 

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

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

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

Ответы [ 5 ]

4 голосов
/ 05 августа 2009

Вы можете сделать это с помощью CSS и IE, если вы заставите элементы иметь скрытое свойство hasLayout: 

<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>
1 голос
/ 05 августа 2009

Для этого гораздо проще использовать таблицу, зачем бороться с 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>

Если вы действительно хотите сделать это с помощью 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
0 голосов
/ 05 августа 2009

Почему вы не используете атрибут 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>
0 голосов
/ 05 августа 2009 
<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>
0 голосов
/ 05 августа 2009

CSS: 

.buttonBar
{
  float:left;
  width:100%;
}
.buttonBar .left
{
  float:left;
}
.buttonBar .right
{
  float:right;
}

HTML: 

<div class="buttonBar">
  <div class="left">
    <input type="submit" value="Button 1" class="button">
    <input type="submit" value="Button 2" class="button">
  </div>
  <div class="right">
    <input type="submit" value="Button 2" class="button">
  </div>
</div>

<table>
.
.
</table>

<div class="buttonBar">
  <div class="left">
    <input type="submit" value="Button 1" class="button">
    <input type="submit" value="Button 2" class="button">
  </div>
  <div class="right">
    <input type="submit" value="Button 2" class="button">
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...