Reputation: 9858

Make new line without using <br> in HTML

I want to make each one of these element is different line, without using <br /> in HTML, <h1> is block element but I have to fix its width. How can I make anchors come under <h1> not beside?

<h1 id="viewerTitle">Header </h1>
<a href="#" class="view-options">View options</a>
<a href="#" class="view-options">View options</a>

Here's an example: http://jsfiddle.net/mmhhd/

Upvotes: 23

Answers (7)

user3814123

Reputation: 31

This is the way that works for me.

p.autonewline {white-space: pre-line;}

Upvotes: 3

Rannnn

Reputation: 582

Alternative way:

Remove float:left; in h1 and display: inline-block; in a.view-options

Then add

h1:after, a:after {
    content:"\a";
    white-space: pre;
}

See http://jsfiddle.net/8my6q/

Upvotes: 13

Caleb Doucet

Reputation: 1781

Take float off the h1 tag and make a tags' display: display: block;

Upvotes: 3

Kylos

Reputation: 1938

Start by removing float: left from h1.

Then add the rule:

a.view-options {
    display: block;
}

Upvotes: 35

Waiting for Dev...

Reputation: 13029

Use CSS:

a {
  display: block;
}

By default a tag is an inline element, so you have to change its display property.

From the CSS specification:

Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). The following values of the 'display' property make an element block-level: 'block', 'list-item', and 'table'.

http://www.w3.org/TR/CSS2/visuren.html#block-boxes

Inline-level elements are those elements of the source document that do not form new blocks of content; the content is distributed in lines (e.g., emphasized pieces of text within a paragraph, inline images, etc.). The following values of the 'display' property make an element inline-level: 'inline', 'inline-table', and 'inline-block'. Inline-level elements generate inline-level boxes, which are boxes that participate in an inline formatting context.

http://www.w3.org/TR/CSS2/visuren.html#inline-boxes

Upvotes: 9