Question

我遇到一个问题，按钮上的文字越过了按钮的边缘。按钮上的文字是：＆＃34;谢谢＆＃34;。我通过在代码中添加以下内容解决了这个问题。这解决了这个问题。

HTML

 <div class="sign-up">
        <p class="sub-header">@Helpers.GetText(CurrentPage, "signupHeaderText", CurrentPage.Parent)</p>
        <form id="signupForm">
            <div class="form-group">
                <label class="sr-only" for="name">@Helpers.GetText(CurrentPage, "signupNameFieldText", CurrentPage.Parent)</label>
                <input type="text" class="form-control" placeholder="@Helpers.GetText(CurrentPage, "signupNameFieldText", CurrentPage.Parent)" id="name" name="name" required />
            </div>
            <div class="form-group">
                <label class="sr-only" for="email">@Helpers.GetText(CurrentPage, "signupEmailFieldText", CurrentPage.Parent)</label>
                <input type="email" class="form-control" id="email" name="email" placeholder="@Helpers.GetText(CurrentPage, "signupEmailFieldText", CurrentPage.Parent)" required/>
            </div>
            <input type="text" id="Channel" name="Channel" style="display: none;" />
            <input type="text" id="Campaign" name="Campaign" style="display: none;" />
            <button type="submit" class="btn btn-default active">@Helpers.GetText(CurrentPage, "signupCtaButtonText", CurrentPage.Parent)</button>
        </form>
    </div>

CSS

.btn.btn-default.active,.btn.btn-default:active,.btn.btn-default:hover {
    background-color: #71a0af;
    color: #fff;
    box-shadow: none
    <!-- i added the below code to this class: -->
    text-align: left;
    padding-left: 12px;
    width: 90px;
}

现在的问题是，我发现另一个按钮正在使用同一个类，但文本在这里：＆＃34;是的请＆＃34;。这意味着现在按钮很小，文本再次飞过侧面。

这个问题的最佳解决方案是什么？我应该为另一个按钮创建另一个类，还是可以使其响应，以便按钮适应文本？

最好的问候

Answer 1

这是我的download课程的摘录（因为我主要将其用于文章上方的download source code或download按钮）：

.download
{
  display: inline-block;

  /* gradient */
  background-color: #627A85; /* old browsers */
  background-image: -moz-linear-gradient(top, #8A9FA9 0%, #4B5E66 100%); /* firefox */
  /* some other gradients removed here, for brevity */

  border: none;
  border-radius: 6px;

  /* some other settings here removed for brevity */

  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4), -2px -2px rgba(0, 0, 0, 0.2) inset;
  line-height: 24px;
  margin: 10px 0 0;
  font-size: 16px;
  padding: 5px 12px 7px 15px;
}

如您所见：没有固定宽度。主要部分是填充和内联块的使用。

文本适应按钮大小

1 个答案: