部分內嵌與樣式化元素？

我在嘗試將section元素與樣式爲aside的元素對齊。我試過inline,block和inline-block的所有組合，但我似乎無法得到任何事情發生。我不明白爲什麼它不應該像它應該那樣對齊。小提琴：http://jsfiddle.net/bmgkB/部分內嵌與樣式化元素？

從外觀上看，這是結果：

...我想（大約）在這裏：

HTML摘錄：

<aside class="icon"><p>§</p></aside> 
    <section role="region" class="aside"> 
     Welcome to the Pyroneous Lair. There is a variety of features here. 
    </section>

CSS摘錄：

@charset UTF-8; 

body 
{ 
    background:#000; 
    color:#FFF; 
    width:90%; 
    font:11px tahoma, sans-serif, serif; 
    margin:auto 
} 

article,aside,figure,footer,header,hgroup,menu,nav,section 
{ 
    display:block 
} 

header 
{ 
    text-align:center 
} 

hr 
{ 
    border:none; 
    border-top:medium double #333; 
    color:#FFF; 
    text-align:center; 
    padding:0 
} 

hr:after 
{ 
    content:"§"; 
    display:inline-block; 
    position:relative; 
    top:-.85em; 
    font-size:1.5em; 
    background:#000; 
    z-index:2; 
    padding:0 .25em 
} 

.icon 
{ 
    font:45px serif, "Times New Roman", sans-serif; 
    color:#000; 
    border-radius:100px; 
    text-align:center; 
    width:70px; 
    height:70px; 
    background:#A60000 
} 

.aside 
{ 
    margin-left:5%; 
    display:inline 
}

來源

2013-04-24 cygorx

使雙方的.aside和.icon是display:inline-block（從icon內並刪除p，因爲它沒有提供任何..）

演示在http://jsfiddle.net/gaby/bmgkB/2/

來源

2013-04-24 22:30:25

部分內嵌與樣式化元素？

回答

相關問題