Menu
I apologize because this seems like such a simple thing.
What's the correct way to insert a newline in a way that the next element is on a newline? It seems like some things automatically do this (such as <p> within `) but I'm seeing behavior where the next element can appear right next to the last element.
HTML:
<ul class="nav nav-tabs span2"> <li><a href="./index.html"><i class="icon-black icon-music"></i></a></li> <li><a href="./about.html"><i class="icon-black icon-eye-open"></i></a></li> <li><a href="./team.html"><i class="icon-black icon-user"></i></a></li> <li><a href="./contact.html"><i class="icon-black icon-envelope"></i></a></li> </ul> <BR /> <!-- It seems dumb to need this! Is this really how --> <BR /> <!-- to get a newline? --> <BR /> <!-- Well, it's what --> <BR /> <!-- I'm doing now, I suppose... --> <BR /> <div class="well span6"> <h3>I wish this appeared on the next line without having to gratuitously use BR!</h3> </div> What is the correct or elegant way to handle newlines after things like ul or div? Am I overlooking a general setup of the code that handles this?
427
The <br> tag inserts a single line break.
To do a line break in HTML, use the <br> tag. Simply place the tag wherever you want to force a line break. Since an HTML line break is an empty element, there's no closing tag.
To add a line break to your HTML code, you use the <br> tag. The <br> tag does not have an end tag. You can also add additional lines between paragraphs by using the <br> tags. Each <br> tag you enter creates another blank line.
The <br> HTML element produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant.
You're using span6 and span2. Both of these classes are "float:left" meaning, if possible they will always try to sit next to each other. Twitter bootstrap is based on a 12 grid system. So you should generally always get the span**#** to add up to 12.
E.g.: span4 + span4 + span4 OR span6 + span6 OR span4 + span3 + span5.
To force a span down though, without listening to the previous float you can use twitter bootstraps clearfix class. To do this, your code should look like this:
<ul class="nav nav-tabs span2"> <li><a href="./index.html"><i class="icon-black icon-music"></i></a></li> <li><a href="./about.html"><i class="icon-black icon-eye-open"></i></a></li> <li><a href="./team.html"><i class="icon-black icon-user"></i></a></li> <li><a href="./contact.html"><i class="icon-black icon-envelope"></i></a></li> </ul> <!-- Notice this following line --> <div class="clearfix"></div> <div class="well span6"> <h3>I wish this appeared on the next line without having to gratuitously use BR!</h3> </div> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
