0

フロントエンド(html、cssなど)が苦手です。下図のようにコンテナ内のボタンを揃えたいです。コンテナには、いくつかの見出しといくつかのボタンがあります。私を出してください。

前もって感謝します。

ここに画像の説明を入力してください

4

4 に答える 4

1

2 つのbutton要素があり、それらを中央に配置する場合はtext-align: center、親に a を追加します。実際の例は次のとおりです: http://jsfiddle.net/skip405/uvAcj/

ボタン間の距離を指定する場合はmargin-left、必要に応じてプロパティを調整するだけです。button:first-childセレクターは最初のボタンを左に移動せず、完全に中央に配置されます。

于 2012-04-23T12:24:11.963 に答える
1

あなたはこれを通してあなたの結果を達成することができます:-

HTML

 <fieldset>
<legend>Container Heading</legend>
<button id="visit_return_button" type="submit">Button1</button>
<button id="visit_return_button" type="submit">Button2</button>
 </fieldset>

CSS

    fieldset {
    border:1px solid;
    width:200px;
    height:70px;
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

legend {

    margin-left:5px;
}

#visit_return_button{
    background-color:#9C8C42;
    border: 2px solid #91782c;
    color: #FFF;
    text-align: center;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 10px;
}

またはデモを参照してください:- http://jsfiddle.net/VY8xs/21/

于 2012-04-23T12:34:21.853 に答える
0

jsfiddle の例

<style>
    div#container {
    overflow:hidden;
    border:1px solid #000;
    width:200px;
    position:relative;
    padding:5px;
}

div#container > button {
    float:left;
    /*or float:right; */
}

​
</style>

<div>containing heading</div>
<div id="container">
<button>submit</button>
<button>cancel</button>
</div>​
于 2012-04-23T12:18:49.090 に答える
0

css float オプションを使用してこれを行うのが好きです。しかし、これを行うにはいくつかの方法があります。ボタンごとに div を作成し、css を使用して適切に配置する必要があります。

例えば:

CSS

#button1{
float: left;
margin-top: 10px;
}

#button2{
float:left;
margin-top: 10px;
margin-left: 10px;
}

HTML

<div id="container">
    <div id="button1">
         Your button HTML here
    </div>

    <div id="button2">
         Your button HTML here
    </div>
</div>
于 2012-04-23T12:16:23.440 に答える