Question

我想知道这里是否有人可以帮助我？我想要一个带有两个单词的按钮，顶部是“Icelandic”，下面是“Toys” 但我还没有设法如何做到这一点。

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

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

Answer 2

我希望这是你需要的。尝试在那里运行代码片段以查看结果

＆＃13;

p{
width:2px;
}

＆＃13;

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

＆＃13;

Answer 3

您也可以将其放入div中：http://jsfiddle.net/swm53ran/32/

（这样你就不需要摆弄单词的像素等等。

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

Answer 4

您可以使用display: table-caption;来达到此效果。

＆＃13;

.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;
}

＆＃13;

<p>
  <a href="#" class='button'>Icelandic Toys</a>
</p>
<br>

＆＃13;

Answer 5

添加line-height:xxpx; /*Edit xx to your values in px.*/属性，并在冰岛<br>玩具之间添加<br>。

如何跨按钮？

5 个答案: