以下のHTMLでは、actionBarクラスに浮動小数点数(leftまたはrightのみ)があるときにレイアウトが動作しますが、 divはページ全体に広がり、レイアウトが崩れます。私は本当にこの "構造"を私のページの中心にしたいと思っています。現在、actionBarクラスで指定された "float"を使用すると、左揃えまたは右揃えになります。誰かがそれをなぜ私に説明することができますか(「すべてが乱れてしまった」という部分)?divを使ったレイアウトは、それ以外の場合を除いて左または右に浮かれば動作しません
もちろん、相対的なHTML新人で、同じレイアウトを達成するための他の素晴らしい方法があれば、それはいつでも歓迎します。今のところ、説明を探していますので、解決策を試すことができます。
注:醜い緑色と青色と赤色は説明のためのものです。実際のHTMLでは、イメージを使用して丸みを帯びたコーナータイプのエフェクトを提供し、基本的にはボタンの集合です。
ありがとうございます!
<html>
<head>
<style>
.actionButtonLeft {
padding: 0; margin: 0; margin-right: 1;
float : left;
width : 8px; height : 26px;
background-color: green;
}
.actionButton {
padding: 0; margin: 0; margin-right: 1;
background-color : blue; color : #ffffff ;
height : 26px;
float : left;
}
.actionButtonRight {
padding: 0; margin: 0;
float : left;
width : 8px; height : 26px;
background-color: green;
}
.actionBar {
float:left; /* or float: right; -- doesn't work with no float */
background-color:#112554;
border: 2px solid red;
}
</style>
</head>
<body>
<div class="actionBar">
<div class="actionButtonLeft" ></div>
<input type="button" value="OK" name="OK" id="okButton" class="actionButton"
style="WIDTH:100px; " onclick="doSomething();">
<input type="button" value="Cancel" name="Cancel" id="cancelButton"
class="actionButton"
style="WIDTH: 100px" onclick="cancelThis();">
<input type="button" value="Help" name="Help" id="helpButton"
class="actionButton"
style="WIDTH: 100px" onclick="helpMe();">
<div class="actionButtonRight"></div>
<div style="width:0px;clear:right;"></div></div>
</body>
</html>
GAppleはあなたの質問に実際に答えます(彼/彼女の+1)。私の「答え」は「解決策を試して見つけることができる」という方向に向けられています。 –
はい、私は約327(境界線付き)の幅を追加することは、ちょっとした作品を投稿した後に通知しました。もちろん、私はそこに2〜4つのボタンがあるかもしれないので、私はそれをすることはできません。だから今私は、固定幅または浮動小数点を使用せずに、親のdivを子供をシュリンクラップさせる方法を探しています。私は分幅を試みたが、それはそれをするように見えなかった。 – Adnan