web-dev-qa-db-ja.com

asp.netの2つの並んだボタンの間にスペースを置く最も簡単な方法は何ですか

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>
htmlcssbuttonspace
40
user570185

次のように仕切りクラスを作成します。

.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をいくつか用意しておくと便利です（私の最もよく使用されるdiv5spacerはこれに似ていますが、高さ5および幅autoのブロックdivを配置して、フォームなどのアイテムの間隔を空けます。

68
Michael Allen

それらの間にスペース&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>
35
QuinnG
#btnClear{margin-left:100px;}

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

.yourClass{margin-left:100px;}

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

28
Alex
    <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"/>
15
WraithNath

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

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

編集：

最初のボタンをdivおよび2番目のボタンから間隔を空けたい場合、このクラスを最初のボタンに適用しますalso。

8
Mahesh Velaga

古い投稿ですが、最もクリーンなアプローチは、周囲のdivにクラスを追加し、各ボタンにボタンクラスを追加して、CSSルールがより多くのユースケースに役立つようにすることです。

/* Added to highlight spacing */
.is-grouped {   
    display: inline-block;
    background-color: yellow;
}

.is-grouped > .button:not(:last-child) {
    margin-right: 10px;
}
Spacing shown in yellow<br><br>

<div class='is-grouped'>
    <button class='button'>Save</button>
    <button class='button'>Save As...</button>
    <button class='button'>Delete</button>
</div>
6
prograhammer

&nbsp;を使用しましたが、うまく機能しています。あなたはそれを試すことができます。引用符を使用する必要はありません

5
azibit

いくつかの&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>
2
ihamlin

そうする別の方法があります：

<span style="width: 10px"></span>

Widthプロパティを使用してスペースの量を調整できます。

あなたのコードは次のようになります：

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

ブートストラップを使用している場合、2番目のボタンにml-3を追加します。

 <div class="row justify-content-center mt-5">
        <button class="btn btn-secondary" type="button">Button1</button>
        <button class="btn btn-secondary ml-3" type="button">Button2</button>
 </div>
0
Manish Jain

スタイルをグローバルに適用する場合は、cssの隣接する兄弟コンビネーターを使用できます。

.my-button-style + .my-button-style {
  margin-left: 40px;
}

/* general button style */
.my-button-style {
  height: 100px;
  width: 150px;
}

ここにフィドルがあります： https://jsfiddle.net/caeLosby/10/

既存の回答のいくつかに似ていますが、最初のボタンにマージンを設定しません。たとえば、

<button id="btn1" class="my-button-style"/>
<button id="btn2" class="my-button-style"/>

btn2のみがマージンを取得します。

詳細については、 https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator を参照してください

0
Tobias Schwarzinger