user3273265
user3273265

Reputation: 7

button width for dynamic button text

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>

Upvotes: 0

Views: 171

Answers (3)

Magesh Kumaar
Magesh Kumaar

Reputation: 1467

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.

Upvotes: 0

MiKE
MiKE

Reputation: 524

You can also use

display: inline; rather then

display: inline-block;

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

Upvotes: 1

Patrick Moore
Patrick Moore

Reputation: 13344

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/

Upvotes: 0

Related Questions