Вставка элемента «block break» внутри блока

Question

Я пытаюсь вставить то, что, как я полагаю, является разрывом строки в элементе элемента css. Я пробовал простой тег <br> и попытался настроить элемент заголовка (h3, например), с полями, заполнением и т. Д., Чтобы не повредить блок.

Это пример того, чего я хочу достичь http://imgur.com/oA5RSHo, и это то, что у меня есть до сих пор. http://jsfiddle.net/3q7on4v2/ Это довольно близко, на мой взгляд, но не так, как будто я хочу его еще. любая помощь приветствуется

<div id="bg"> <ul class="nav"> <h1> Tonight </h1> <li><a href="#notisia">E Notisia</a></li> <li><a href="#wega">Mercee</a></li> <li><a href="#konkulshon">Last Call</a></li> <li><a href="cinema">Unu-Unu</a></li> </ul> </div>

.nav { 
list-style-type: none; 
margin-top: 0px; 
padding: 0; 
overflow: hidden; } 

.nav a{ 
display: block; 
width: 200px; 
height:60px; 
font-weight: bold; 
color: #ffffff; 
background-color: #323643; 
text-align: center; 
line-height:60px; 
padding: 4px; 
text-decoration: none; 
border-left: 1px solid #818181;} 

.nav a:hover {background-color: #404452; } 
.nav li{ float: right; } 
h1 { 
color: #F2F2F3; 
display: inline-block; 
margin-top: 15px; 
margin-bottom: 0; 
padding: 0; } 
#bg { background-color: #323643; } 

Answer 1

Я обновил jsfiddle код. Так что посмотри. Вы увидите, что я добавил пролет в теге h1 и стилизовал диапазон, чтобы быть меньшим шрифтом, и вы могли бы сделать другой цвет, что хотите.

Возможно, вам понадобится обертка вокруг этого в этот момент, все поплавает вправо.

<div id="bg"> 
    <ul class="nav"> 
     <li><a href="#notisia">E Notisia</a></li> 
     <li><a href="#wega">Mercee</a></li> 
     <li><a href="#konkulshon">Last Call</a></li> 
     <li><a href="cinema">Unu-Unu</a></li> 
    </ul> 
<h1>Tonight 
    <span>test</span> 
</h1> 
<div class="clear"></div> 
</div> 

ul{padding:0; margin:0;} 
 
ul li{padding:0; margin:0;} 
 

 
.nav { 
 
\t list-style-type: none; 
 
\t margin-top: 0px; 
 
\t padding: 0; 
 
\t overflow: hidden; 
 
    float:right; 
 
} 
 

 
.nav a{ 
 
\t display: block; 
 
\t width: 200px; 
 
\t height:60px; 
 
\t font-weight: bold; 
 
\t color: #ffffff; 
 
\t background-color: #323643; 
 
\t text-align: center; 
 
\t line-height:60px; 
 
\t padding: 4px; 
 
\t text-decoration: none; 
 
\t border-left: 1px solid #818181; 
 
} 
 
.nav a:hover {background-color: #404452; } 
 
.nav li{ 
 
\t float: right; 
 
} 
 
h1 { 
 
\t color: #F2F2F3; 
 
\t display: inline-block; 
 
\t padding: 5px 10px; 
 
    float:right; 
 
    margin:0; 
 
} 
 
h1 span{ font-size:12px; display:block;} 
 
.clear{ clear:both;} 
 
#bg { background-color: #323643; margin:0; padding:0; }