CSS-Menü, wo Tasten usw. nach links und rechts ausgerichtet werden können

Ich muss die folgende Art von Menü machen, aber ich weiß nicht, wie ich mit CSS Links nach rechts ausrichten kann, damit es in IE funktioniert auch. Menü sollte auch Höhe fixiert, aber das scheint einige Probleme zu verursachen ..CSS-Menü, wo Tasten usw. nach links und rechts ausgerichtet werden können

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

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

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

Quelle

2009-08-05 Anonymous

Sie können dies tun mit CSS und in IE, wenn Sie die Elemente zwingen, die versteckt hasLayout Eigenschaft zu haben:

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

Quelle

2009-08-05 09:59:43 Keith

Das ist gut, aber ich habe Probleme mit IE7 mit .menu-button-right, denn wenn ich Element verlassen habe, dann wird es aus dem Menü fallen ... In Firefox und anderen Browser funktioniert das gut, aber IE7 scheint zu habe dieses seltsame Problem ... –

IE tut normalerweise - wenn Sie ein Problem mit diesem Layout haben, funktioniert die absolute Alternative manchmal besser in IE. Ändern Sie den Wrapper div in Position: relative, und ändern Sie dann .menu-button-right in {position: absolute; oben: 0; rechts: 0; }. Eine andere Option ist das float: right Element zuerst. – Keith

Es ist so viel einfacher, einen Tisch zu verwenden, um dies zu tun, warum Kampf mit 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>

Wenn Sie es wirklich mit CSS zu tun, versuchen Sie so etwas wie

<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

Quelle

2009-08-05 09:48:55

+ 1 Althought wir nicht gesagt, Tabellen zu verwenden ... dies ist ein klar, sie auf eine vernünftige Weise zu verwenden. – yeyeyerman

Ein generelles Problem, das ich bei CSS sehe, ist die Aufrechterhaltung der Spaltenbreiten. Es ist einfach mit einem festen Design, aber Tabellen geben Ihnen tatsächlich mehr Flexibilität IMHO. –

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>

Quelle

2009-08-05 09:57:54 Charlie

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

Quelle

2009-08-05 09:58:16 Marius

Warum verwenden Sie nicht das Float-Attribut?

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

Quelle

2009-08-05 09:58:30

CSS-Menü, wo Tasten usw. nach links und rechts ausgerichtet werden können

Antwort

Verwandte Themen