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

Ответ 1

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

.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 и шириной auto для выделения элементов в форме и т.д.

Ответ 2

Добавьте пробел   между ними (или больше в зависимости от ваших предпочтений)

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

Ответ 3

#btnClear{margin-left:100px;}

Или добавьте класс к кнопкам и выполните следующие действия:

.yourClass{margin-left:100px;}

Это достигает этого - http://jsfiddle.net/QU93w/

Ответ 4

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

Ответ 5

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

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

Edit:

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

Ответ 6

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

Ответ 7

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

Ответ 8

Можете ли вы просто немного  ?

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

Ответ 9

Есть и другой способ:

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

Ответ 10

У меня просто была такая же проблема. Кажется, самый простой способ - добавить пару htmlspaces между ними:

'Sign up', 'type' => 'submit'));?>     "Сброс", "тип" => "сброс"));

Хорошо работает для меня.

Ответ 11

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

Ответ 12

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