Место 2 Кнопки по горизонтали

Question

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

Любой простой фрагмент кода html и css, который кто-то мог бы поделиться?

я не мог найти какой-нибудь хороший пример

Answer 1

Есть несколько способов, здесь очень простой пример с плавающей точкой:

https://jsfiddle.net/dbb8xk38/

<button class="button-1">Example</button> 
<button class="button-2">Example 2</button> 

button{ 
    float: left; 
} 

.button-2{ 
    margin-left: 15px; 
} 

Я настоятельно призываю вас идти W3School Учебник CSS, он научит вас потрясающим вещам.

http://www.w3schools.com/css/default.asp

Примечание: В случае, если с помощью кнопок вы даже не должны плавать их, по умолчанию они придут рядом друг с другом. Но с такими элементами, как div, вам нужно будет плавать.

Answer 2

Зависит от того, чего вы пытаетесь достичь с остальной частью страницы, с точки зрения макета и того, какие стили вы хотите применить к другим кнопкам и другим элементам управления HTML.

http://www.w3schools.com/css/css_margin.asp

HTML:

<button>Button 1</button> 
<button>Button 2</button> 

CSS:

button { 
    margin-left:20px; 
} 

HTML/CSS выше поместит маржу 20 пикселя слева от каждой кнопки. Если вам просто нужно применить его к одной кнопке, для этого вам понадобится отдельный класс или некоторый встроенный стиль.

E.g.

CSS:

.buttonSpaced { 
    margin-left:20px; 
} 

А потом просто применить этот стиль только 2 кнопки.

HTML:

<button class="buttonSpaced">Button 2</button> 

Или вы могли бы просто сделать это рядный, если это, вероятно, будет использоваться снова не ...

<button style="margin-left:20px;">Button 2</button>