button width for dynamic button text

Question

I want something like this

button1 button2

but the problem is I can't set fixed width for the text within the button because it could be dynamic. And inline-block doesn't wor in my case?

http://jsfiddle.net/sV8LH/

<p><span class="btn">Reveal Identity</span><span class="btn">View similar candidates</span></p>

score 1 · Answer 1 · answered Feb 09 '14 at 04:15

1

You can also use

display: inline; rather then

display: inline-block;

Example: http://jsfiddle.net/sV8LH/6/

answered Feb 09 '14 at 04:15

MiKE

524
6
12

score 0 · Accepted Answer · answered Feb 09 '14 at 04:07

0

You can float them left, which will set auto width.

<p>
<span class="btn">Reveal Identity</span>
<span class="btn">View similar candidates</span>
<br clear="all" />
</p>

.btn {
    float: left;
    margin-right: 10px;
}

http://jsfiddle.net/sV8LH/2/

answered Feb 09 '14 at 04:07

Patrick Moore

13,251
5
38
63

float and the width will be auto? this is my first time knowing this! – user3273265 Feb 09 '14 at 04:08
As long as you don't declare it specifically (look at the fiddle.. I removed `width: 100%` – Patrick Moore Feb 09 '14 at 04:08
You can leave the `float` completely off, when using `inline-block` http://jsfiddle.net/sV8LH/4/ – loveNoHate Feb 09 '14 at 04:12
what is the differences btw float left and inline-block? they seem doing the same thing in my case – user3273265 Feb 09 '14 at 04:42
[This](http://stackoverflow.com/questions/8969381/what-is-the-difference-between-display-inline-and-display-inline-block) is a good answer describing inline-block property. Inline means it is displayed in line with the document flow (like ``). Block means it takes up full width and a line break following (like `
`). When you float an element, it is outside of the document flow and the rest of the content flows around it. Inline-block does not; document continues to flow as normal.
– Patrick Moore Feb 09 '14 at 04:58

score 0 · Answer 3 · answered Feb 09 '14 at 04:24

There are two ways to do this

float:left and display:inline

This will align the span elements next to one another by pulling them to one side(float:left)

Just a Heads up: add a margin:value in px to create buttons with inter-elemental space for better styling.

button width for dynamic button text

3 Answers3