58

2 つのボタンが並んでいますが、その間にボタンを配置したいと考えています。

次のコードでは、2 つのボタンが隣り合って表示されます。div のマージンを試しましたが、2 つの間に適切なスペースを確保できませんでした。

<div style="text-align: center"> 
    <asp:Button ID="btnSubmit" runat="server" Text="Submit" Width="89px" OnClick="btnSubmit_Click" />
    <asp:Button ID="btnClear" runat="server" Text="Clear" Width="89px" OnClick="btnClear_Click" />
</div>
4

12 に答える 12

83

次のように分割クラスを作成します。

.divider{
    width:5px;
    height:auto;
    display:inline-block;
}

次に、これを 2 つのボタンの間の div にアタッチします

<div style="text-align: center"> 
    <asp:Button ID="btnSubmit" runat="server" Text="Submit" Width="89px" OnClick="btnSubmit_Click" />
    <div class="divider"/>
    <asp:Button ID="btnClear" runat="server" Text="Clear" Width="89px" OnClick="btnClear_Click" />
</div>

これは、古いブラウザーでは問題となる可能性があるボックス モデルを回避し、スクリーン リーダーによって取得される余分な文字を追加しないため、読みやすさが向上するため、最良の方法です。

特定のシナリオでは、これらのタイプの div を多数用意することをお勧めします (私が最もよく使用するのはこれに似た vert5spacer ですが、高さ 5、幅 auto のブロック div を配置して、フォーム内の項目の間隔を空けるなどです。

于 2011-02-25T16:35:07.880 に答える
43

それらの間にスペースを追加し&nbsp;ます（または好みに応じてさらにスペースを追加します） 

    <div style="text-align: center">         
        <asp:Button ID="btnSubmit" runat="server" Text="Submit" Width="89px" OnClick="btnSubmit_Click" />
        &nbsp;
        <asp:Button ID="btnClear" runat="server" Text="Clear" Width="89px" OnClick="btnClear_Click" />
    </div>
于 2011-02-25T16:28:31.313 に答える
31 
#btnClear{margin-left:100px;}

または、ボタンにクラスを追加して、次のようにします。

.yourClass{margin-left:100px;}

これはこれを達成します - http://jsfiddle.net/QU93w/

于 2011-02-25T16:31:04.790 に答える
17 
    <style>
    .Button
    {
        margin:5px;
    }
    </style>

 <asp:Button ID="Button1" runat="server" Text="Button" CssClass="Button" />
 <asp:Button ID="Button2" runat="server" Text="Button" CssClass="Button"/>
于 2011-02-25T16:30:13.533 に答える
10

2番目のボタンに次のクラスを配置してみてください

.div-button
{
    margin-left: 20px;
}

編集：

最初のボタンを div と 2 番目のボタンから離したい場合は、このクラスを最初のボタンにも適用します。

于 2011-02-25T16:29:14.657 に答える
3

ほんの少しだけできますか&nbsp;？

<div style="text-align: center"> 
    <asp:Button ID="btnSubmit" runat="server" Text="Submit" Width="89px" OnClick="btnSubmit_Click" />
    &nbsp;&nbsp;
    <asp:Button ID="btnClear" runat="server" Text="Clear" Width="89px" OnClick="btnClear_Click" />
</div>
于 2011-02-25T16:27:56.550 に答える