html - 按钮文本堆叠与保持内联

Question

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

按钮文本堆叠在彼此之上而不是在一行中流动。

我的按钮html代码如下:

我包括了按钮所在的整行，首先标记了特定于相关按钮的代码。这两个代码片段都在一个 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/

问题是由于百分比中的填充单位根据屏幕大小而变化，而文本大小保持不变。