2013-03-12 50 views
0

我試圖讓我的名字在另一個包含網站名稱的塊內,但無法弄清楚。我可以使用什麼?在另一個裏面有多個塊?

我試圖讓我的網站名稱有一個較小的擴展名後,它的作品。但是,我希望我的名字下面沒有空格。

<div id="sitename"> 
    <span id="address">website</span> 
    <span id="extension">.blah</span> 
    <span id="name">namegoeshere</span> 
</div> 

#sitename { 
    width: 330px; 
    margin: 35px auto 0 auto; 
    text-align: center; 
    cursor: default; 
} 

#address { 
    display: inline-block; 
    height: 65px; 
    font-size: 50pt; 
    font-weight: 800; 
    color: rgb(99,99,99); 
} 

#extension { 
    display: inline-block; 
    height: 65px; 
    font-size: 30pt; 
    font-weight: 800; 
    color: rgb(99,99,99) 
} 

#name { 
    display: block; 
    width: 72%; 
    text-align: right; 
    font-size: 11.5pt; 
    font-weight: 500; 
    color: rgb(99,99,99); 
} 

小提琴:在名稱http://jsfiddle.net/CX5Dn/

+1

How2Margins什麼。認真。 – David 2013-03-12 00:05:44

回答

3

這是你想要達到

HTML

<div id="sitename"> 
    <span id="address">website<span id="extension">.blah</span></span> 
    <span id="name">namegoeshere</span> 
</div> 

CSS

#sitename { 
    width: 330px; 
    margin: 35px auto 0 auto; 
    text-align: center; 
    cursor: default; 
} 

#address { 
    display: inline-block; 
    height: 65px; 
    font-size: 50pt; 
    font-weight: 800; 
    color: rgb(99,99,99); 
} 

#extension { 
    display: inline-block; 
    height: 65px; 
    font-size: 30pt; 
    font-weight: 800; 
    color: rgb(99,99,99) 
} 

#name { 
    display: block; 
    width: 72%; 
    text-align: right; 
    font-size: 11.5pt; 
    font-weight: 500; 
    color: rgb(99,99,99); 
} 

工作demo

0

邊距。

#name { 
display: block; 
width: 72%; 
text-align: right; 
font-size: 11.5pt; 
font-weight: 500; 
color: rgb(99,99,99); 
margin-top: -20px; 
}