CODEWITHSUNDEEP
htmlcss
Jaqx
Jaqx

Reputation: 826

why can't I get the button to form inline?

I want the btn next to the string. I can't figure it out even using CSS inline

enter image description here

 <span class="subscribe_button"> <h3>Books</h3> <%= render 'follow_form' %></span>

CSS:

.subscribe_button {
display: inline;
}

Upvotes: 0

Views: 394

Answers (7)

Kyle
Kyle

Reputation: 67194

You have some invalid HTML here.

A block level element cannot be within an inline one, this is basic HTML knowledge.

What I suggest you do is wrap both elements in a div and use float: left;

<div class="wrap">

<h3>Books</h3>
<span class="subscribe_button"> unsubscribe</span>

</div>

CSS:

.wrap
{
    width: 300px;
}

.wrap h3, 
.wrap span
{
    float: left;
}

.wrap span
{
    margin-left: 10px/*your value*/;
}

I also suggest you go read up on HTML rules, what is allowed where and why they are or are not allowed.

http://jsfiddle.net/Kyle_Sevenoaks/zJUZs/

Upvotes: 6

David Czinege
David Czinege

Reputation: 529

I think you can do this with this code:

.subscribe_button > * {
  display: inline;
}

'>' is a child selector and * matches to all element.

Yo can read more about CSS2 selectors: CSS2 Selectors

Upvotes: 0

Milind
Milind

Reputation: 457

use float:left for both h3 and button

Upvotes: 0

عثمان غني
عثمان غني

Reputation: 2708

Try following code

.subscribe_button h3{
display: inline;
}

Upvotes: 0

Marek Rand
Marek Rand

Reputation: 89

Span is inline element and h3 is block element. Inline elements should be inside block elements. Have you tried to validate your html code? http://validator.w3.org/

try: display: inline-block;

Upvotes: 0

cowls
cowls

Reputation: 24334

Try adding this to your CSS

.subscribe_button h3 {
    float: left;
}

If you float an element it means other elements after it will wrap onto the same line as it (as long as theyre width does not make them too wide).

Upvotes: 1

Veger
Veger

Reputation: 37905

The Books part is (also) a block (due to <h1>), so you need to set it to inline as well (as shown in the comment of limelights), otherwise your button will still be pushed to the next line.

Upvotes: 1

Related Questions