2015-01-07 66 views
3

我想知道這裏有人能幫助我嗎? 我想要一個帶有兩個單詞的按鈕,「Icelandic」在頂部和「Toys below」。
但我沒有管理如何做到這一點。如何跨度按鈕?

<p><a href="Icl-Toys.htm" class='button' >Icelandic Toys</a></p><br> 

我的CSS:

.button { 
border: 2px solid #0a3c59; 
background: #f7f9fa; 
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f7f9fa)); 
background: -webkit-linear-gradient(top, #ffffff, #f7f9fa); 
background: -moz-linear-gradient(top, #ffffff, #f7f9fa); 
background: -ms-linear-gradient(top, #ffffff, #f7f9fa); 
background: -o-linear-gradient(top, #ffffff, #f7f9fa); 
background-image: -ms-linear-gradient(top, #ffffff 0%, #f7f9fa 100%); 
padding: 11.5px 23px; 
-webkit-border-radius: 6px; 
-moz-border-radius: 6px; 
border-radius: 6px; 
-webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0; 
-moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0; 
box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0; 
text-shadow: #7ea4bd 0 1px 0; 
color: #06426c; 
font-size: 15px; 
font-family: helvetica, serif; 
text-decoration: none; 
vertical-align: middle; 
} 

回答

0

我希望這是什麼ü需要。嘗試運行的代碼片段那裏看看結果

p{ 
 
width:2px; 
 
}
<p><a href="Icl-Toys.htm" class='button' >Icelandic Toys</a></p><br>

0

則可以選擇把它變成像這樣一個div:http://jsfiddle.net/swm53ran/32/

(這樣你就不會需要的像素搗鼓字和whatnot

<div class="button1"> 
    <a href="Icl-Toys.htm" class='' >Icelandic<br/>Toys</a> 
</div> 


.button1 a { 
    text-decoration:none; 
} 

.button1 { 
display:inline-block; 
text-align:center;  
...the rest of your code 
} 
1

您可以將邊框移動到P,並將其設置爲固定寬度,它會更加優雅地打破。

不需要額外的標記或定位。

.button { 
    color: #06426c; 
    font-size: 15px; 
    font-family: helvetica, serif; 
    text-decoration: none; 
    vertical-align: middle; 
} 

p { 
    width: 50px; 
    text-align: center; 
    border: 2px solid #0a3c59; 
    background: #f7f9fa; 
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f7f9fa)); 
    background: -webkit-linear-gradient(top, #ffffff, #f7f9fa); 
    background: -moz-linear-gradient(top, #ffffff, #f7f9fa); 
    background: -ms-linear-gradient(top, #ffffff, #f7f9fa); 
    background: -o-linear-gradient(top, #ffffff, #f7f9fa); 
    background-image: -ms-linear-gradient(top, #ffffff 0%, #f7f9fa 100%); 
    padding: 11.5px 23px; 
    -webkit-border-radius: 6px; 
    -moz-border-radius: 6px; 
    border-radius: 6px; 
    -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0; 
    -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0; 
    box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0; 
    text-shadow: #7ea4bd 0 1px 0; 
} 

演示: http://jsfiddle.net/k2oostzq/2/

選項2

如果你不想固定寬度的按鈕,它們或者是動態的,可以使用<br>標籤與此代碼,並交換在p的內聯塊顯示中。

HTML增添BR:

<p><a href="Icl-Toys.htm" class='button'>Icelandic<br>Toys</a></p> 

CSS:

.button { 
    color: #06426c; 
    font-size: 15px; 
    font-family: helvetica, serif; 
    text-decoration: none; 
    vertical-align: middle;  
} 

p { 
    display: inline-block; 
    text-align: center; 
    border: 2px solid #0a3c59; 
    background: #f7f9fa; 
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f7f9fa)); 
    background: -webkit-linear-gradient(top, #ffffff, #f7f9fa); 
    background: -moz-linear-gradient(top, #ffffff, #f7f9fa); 
    background: -ms-linear-gradient(top, #ffffff, #f7f9fa); 
    background: -o-linear-gradient(top, #ffffff, #f7f9fa); 
    background-image: -ms-linear-gradient(top, #ffffff 0%, #f7f9fa 100%); 
    padding: 11.5px 23px; 
    -webkit-border-radius: 6px; 
    -moz-border-radius: 6px; 
    border-radius: 6px; 
    -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0; 
    -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0; 
    box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0; 
text-shadow: #7ea4bd 0 1px 0; 
} 

演示: http://jsfiddle.net/tL2dc2ov/1/

0

您可以使用display: table-caption;達到這種效果。

.button { 
 
    border: 2px solid #0a3c59; 
 
    background: #f7f9fa; 
 
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f7f9fa)); 
 
    background: -webkit-linear-gradient(top, #ffffff, #f7f9fa); 
 
    background: -moz-linear-gradient(top, #ffffff, #f7f9fa); 
 
    background: -ms-linear-gradient(top, #ffffff, #f7f9fa); 
 
    background: -o-linear-gradient(top, #ffffff, #f7f9fa); 
 
    background-image: -ms-linear-gradient(top, #ffffff 0%, #f7f9fa 100%); 
 
    padding: 11.5px 23px; 
 
    -webkit-border-radius: 6px; 
 
    -moz-border-radius: 6px; 
 
    border-radius: 6px; 
 
    -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(255, 255, 255, 0.4) 0 1px 0; 
 
    -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(255, 255, 255, 0.4) 0 1px 0; 
 
    box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(255, 255, 255, 0.4) 0 1px 0; 
 
    text-shadow: #7ea4bd 0 1px 0; 
 
    color: #06426c; 
 
    font-size: 15px; 
 
    font-family: helvetica, serif; 
 
    text-decoration: none; 
 
    vertical-align: middle; 
 
    
 
    /* New Style */ 
 
    display: table-caption; 
 
    text-align: center; 
 
}
<p> 
 
    <a href="#" class='button'>Icelandic Toys</a> 
 
</p> 
 
<br>

0

添加line-height:xxpx; /*Edit xx to your values in px.*/財產和冰島<br>玩具之間添加一個<br>