Question

我目前正在使用div标签构建表单，但是我遇到了按钮及其文本的问题。在桌面网站上，表单看起来很好，但是，无论何时在移动设备上，提交和重置按钮文本保持（居中对齐），但文本的行为不应该如此。

有人可以帮我解决这个问题吗？

Answer 1

在您的网站上有一个CSS规则，使您的按钮占用其父级宽度的25％：

@media (max-width: 600px) {
  .submit, .reset {
    max-width: 100%;
  }
}

当浏览器的宽度低于600px时，让这些按钮取100％写：

max-width: 25%

当然，它必须低于{{1}}规则，因此不会被覆盖。

Answer 2

发生这种情况是因为当有足够的空间时，按钮的大小由字体宽度+周围的填充决定。每当周围div提供的房间不够时（例如在较小的屏幕上），它不再依赖于字体宽度并试图用它的填充来保持按钮大小。首先，这首先是预期的行为。

你能做些什么来解决这个问题取决于你想要达到什么样的解决方案，快速解决方案是：

1-您可能会选择@media查询或引导程序，然后让按钮变为完整大小的屏幕（占据整行，就像一行）

你不想在移动设备的一行上放置这两个按钮，假设你做了它并且脚本使文字更小？那么用户最后怎么读呢？这不是一个好主意。

Answer 3

您需要删除按钮上的max-width: 25%;。

你可以在按钮上使用这样的东西：

display: inline-block;
width: 100%;
max-width: 220px;

您可能想要使用媒体查询：

@media(max-width: 480px) {
    .yourClass{

    }
}

Answer 4

您在提交和重置类上设置了最大宽度：

 .submit, .reset {
     max-width: 25%;

当容器变小时，按钮将拒绝变宽（我假设堆栈）。您可以在较小的断点处设置最大宽度100％或显式宽度：

 @media (max-width: 600px) {
      .submit, .reset {
         max-width: 100%;
      }
 }

Answer 5

在您的原始代码中：

.submit, .reset {
    max-width: 25%;
    height: auto;
    background-color: orange !important;
    z-index: 8;
    white-space: nowrap;
    font-size: 15px;
    line-height: 14px;
    font-weight: 700;
    color: rgb(255, 255, 255);
    font-family: Montserrat;
    background-color: rgb(247, 153, 31);
    border-radius: 30px;
    outline: none;
    box-shadow: none;
    box-sizing: border-box;
    cursor: pointer;
    visibility: inherit;
    transition: none;
    text-align: inherit;
    margin: 0px;
    padding: 17px 32px;
    letter-spacing: 0px;
    opacity: 1;
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform-origin: 50% 50% 0px;
    overflow: hidden;
}

从上面的代码中，我删除了padding: 17px 32px;。然后将其替换为height: 40px !important;。填充导致按钮在移动浏览时无响应。设置高度可以解决问题！

Answer 6

只需将以下样式添加到包含这些按钮的div中即可。

display:flex; 
flex-wrap:wrap; 
align-items:center;
justify-content:center;

使表单按钮标签/文本响应

6 个答案: