블록 요소 안에 "줄 바꿈"삽입

Question

CSS 블록 요소에 줄 바꿈으로 가정하는 내용을 삽입하려고합니다. 나는 간단한 <br> 태그를 시도해보고 여백이있는 블록 안쪽에 맞게 마진, 패딩 등으로 제목 요소 (예 : h3)를 조정하려고했습니다.

이것은 내가 달성하고자하는 것의 예입니다. http://imgur.com/oA5RSHo 이것은 지금까지 제가 가지고있는 것입니다. http://jsfiddle.net/3q7on4v2/ 제 의견으로는 꽤 가깝지만 아직 원하는 것은 아닙니다. 어떤 도움 내가 jsfiddle 코드를 업데이트

.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

<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>

을 감사합니다. 그래서 한번보세요. 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; }