какой самый простой способ поместить пробел между 2 рядом друг с другом кнопками в asp.net - PullRequest
Новая
       10

какой самый простой способ поместить пробел между 2 рядом друг с другом кнопками в asp.net

38 голосов
/ 25 февраля 2011

У меня есть 2 кнопки рядом, и я бы хотел, чтобы между ними было немного.

Следующий код будет иметь 2 кнопки рядом друг с другом.Я попробовал margin для div, и просто не смог найти какое-то хорошее пространство между ними.

<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>

Ответы [ 10 ]

65 голосов
/ 25 февраля 2011

создайте класс делителя следующим образом: 

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

Затем прикрепите это к 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, похожий на этот, но он помещает блок div с высотой 5 и шириной автоматически для разнесения элементов в форме и т. Д.)

35 голосов
/ 25 февраля 2011

Добавьте пробел &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>
28 голосов
/ 25 февраля 2011 
#btnClear{margin-left:100px;}

Или добавьте класс к кнопкам и получите: 

.yourClass{margin-left:100px;}

Это позволяет достичь этого - http://jsfiddle.net/QU93w/

15 голосов
/ 25 февраля 2011 
    <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"/>
8 голосов
/ 25 февраля 2011

Попробуйте поместить следующий класс на кнопку секунда 

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

Редактировать:

Если вы хотите, чтобы ваша первая кнопка была разнесенаот div, а также от второй кнопки, затем примените этот класс к своей первой кнопке также .

6 голосов
/ 09 августа 2017

Старая публикация, но я бы сказал, что самым чистым подходом было бы добавить класс к окружающему 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>
5 голосов
/ 08 января 2016

Я использовал &nbsp;, и он работает нормально. Вы можете попробовать это. Вам не нужно использовать кавычки

2 голосов
/ 25 февраля 2011

Можете ли вы просто немного &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>
1 голос
/ 14 февраля 2017

Есть еще один способ сделать это:

<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>
0 голосов
/ 28 февраля 2019

Если вы хотите, чтобы стиль применялся глобально, вы можете использовать соседний братский комбинатор из 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

...