Question

我有一个带有“了解更多”文字的按钮

按钮文字堆叠在彼此之上而不是流线。

按钮的html代码如下：

我包含按钮所在的整行，首先标记了特定于该按钮的代码。这两个代码snippt都在一个bootstrap行

中

<div class="row"> <!--bottom row-->
     <div class="leftbutton col-md-2 col-md-offset-1">
       <a id="helpbutton" href="mailto:someone@example.com?Subject=Help"><button>Help</button></a>
     </div>

下面是问题按钮的代码..

     <div class="rightbutton col-md-5 col-md-offset-5">
       <button>Learn More</button>
     </div>

   </div> <!--end bottom row-->

按钮的css如下：

.rightbutton button{
    font-size: 20px;
    color: #1c94c4;
    padding-left: 40%;
    padding-right: 40%;
  }

发生了什么事？我在想字体，但这对我没有任何意义。

赞赏另一双眼睛。

Answer 1

使用white-space:nowrap

CSS：

.rightbutton button {
  font-size: 20px;
  color: #1c94c4;
  padding-left: 40%;
  padding-right: 40%;
  white-space: nowrap;
}

演示：http://jsfiddle.net/GCu2D/2156/

问题是因为填充单位的百分比根据屏幕尺寸而变化，而文字大小保持不变。

按钮文本堆叠与保持内联

1 个答案: