私は次のような種類のメニューを作成する必要がありますが、IEで動作するように、CSSを左右に配置する方法がわかりませんあまりにも。なぜCSSと格闘、これを行うには、テーブルを使用するので、はるかに簡単であるボタンなどを左右に揃えることができるCSSメニュー
|Button1|Button2|-----------------------------------------------|Button3|
|table here ------------------------------------------------------------|
|Button1|Button2|-----------------------------------------------|Button3|
あなたは隠されたhasLayout性質を持っている要素を強制場合は、CSSとし、IEでこれを行うことができます。私たちは、これはAです...テーブルを使用しないように言われ
<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>
...メニューも高さを固定しているはずですが、それはいくつかの問題を引き起こしているようですか？
<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
+ 1 Althought彼らを賢明な方法で使用することは明らかです。 – yeyeyerman
CSSで見られる一般的な問題は、列の幅を維持することです。固定デザインでは簡単ですが、テーブルは実際にはより柔軟な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>
<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>
なぜ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>
これはいいですが、要素を残しておけば、メニューからドロップダウンするので、IE7との間に問題があります。Firefoxや他のブラウザでは、これは問題なく動作しますが、IE7はこの奇妙な問題を抱えている... –
IEは通常行います - あなたはこのレイアウトに問題がある場合、絶対的な代替はIEでうまくいくことがあります。ラッパーdivをposition：relativeに変更し、.menu-button-rightを{position：absolute;}に変更します。トップ：0;右：0; }。もう一つの選択肢は、float：right要素を最初に置くことです。 – Keith