CODEWITHSUNDEEP
csshtml
some1
some1

Reputation: 1737

Unwanted line breaks in divs and spans

I'm using the following code to do some show / hide jquery effects:

<div id="toc_head1">
   <span id="plus1">
       +
   </span>&nbsp;&nbsp;&nbsp;
   <h4>Overview</h4>
</div>

Unfortunately, this is causing unwanted line breaks between the + symbol and the header text, even when this is added to my .css

white-space:nowrap;

How do I keep the plus symbol on the same line as the header? Thanks.

Upvotes: 0

Views: 642

Answers (1)

Sunyatasattva
Sunyatasattva

Reputation: 5840

The h1~h6 elements are block elements, which means that they take the entire width of their container.

You have to use display: inline-block to make them stay on the same line (or float, or display: inline).

In your case, you might want to consider putting the span element inside your h4 if it's semantically connected.

Upvotes: 2

Related Questions