Reputation: 7
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?
<p><span class="btn">Reveal Identity</span><span class="btn">View similar candidates</span></p>
Upvotes: 0
Views: 171
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
Reputation: 524
You can also use
display: inline;
rather then
display: inline-block;
Example: http://jsfiddle.net/sV8LH/6/
Upvotes: 1
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;
}
Upvotes: 0