css - 如何制作流体按钮

Question

我在表单中使用了一个提交按钮。长文本通常没问题，但在小屏幕上查看时会出现问题。

目前，无论页面宽度如何，按钮都保持相同的宽度，如果页面太窄，则会导致页面水平滚动。

我希望文本像在行内 block 元素中一样换行。我已经在 css 中指定了它，但它似乎不起作用。

input{background:#deaded;padding:10px 30px;display:inline-block;border-radius:5px}

<input type="submit" value="This is where the slogan goes" />

Answer 1

您可以使用white-space: normal;。

input {
  background: #deaded;
  padding: 10px 30px;
  display: inline-block;
  border-radius: 5px;
  white-space: normal;
}

<input type="submit" value="This is where the slogan goes" />