忽略按钮

Question

我遇到一个<button>元素的问题，当输入多行文本时，它想要移出位置。通常，您可以在静态设计中解决此问题，但是考虑到按钮内部的文本是dynamic，并且将根据数据库中的值进行更改。这是一个问题。下面是我正在谈论的一个例子。

body {
  width: 400px;
  height: 300px;
  overflow: hidden;
  border: 1px solid black;
}

.row {
  width: 100%;
  height: 150px;
  text-align: center;
  border: 1px solid black;
}

.col {
  width: 49%;
  height: 150px;
  display: inline-block;
}

.button {
  width: 100%;
  height: 100%;
}

<div id="container">
  <div class="row">
    <div class="col">
      <button class="button">This button has too much text so it shrinks and overlaps the one below it. Instead I just want the text to fill up the button</button>
    </div>
    <div class="col">
      <button class="button">Text</button>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <button class="button">Text</button>
    </div>
    <div class="col">
      <button class="button">Text</button>
    </div>
  </div>
</div>

如何才能使文字填充按钮而不在顶部添加边距？ （我说保证金，因为在我的项目中，按钮的大小不会改变，但它只是向下移动并与另一个按钮重叠。（见截图）：

Answer 1

我不确定你在这里的含义 - 在你的例子中我看不到任何与其他东西“重叠”的东西，并且当你说按钮缩小时更多内容，对我来说似乎也没有意义。

所以我只能猜测，或许你只是想简单地指定不同高度的元素的垂直对齐......？

body {
  width: 400px;
  height: 300px;
  overflow: hidden;
  border: 1px solid black;
}

.row {
  width: 100%;
  height: 150px;
  text-align: center;
  border: 1px solid black;
}

.col {
  width: 49%;
  height: 150px;
  display: inline-block;
  vertical-align:top; /* added just this, to align content */
                      /* of different heights to the top of those columns */
  
}

.button {
  width: 100%;
  height: 100%;
}

<div id="container">
  <div class="row">
    <div class="col">
      <button class="button">This button has too much text so it shrinks and overlaps the one below it. Instead I just want the text to fill up the button</button>
    </div>
    <div class="col">
      <button class="button">Text</button>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <button class="button">Text</button>
    </div>
    <div class="col">
      <button class="button">Text</button>
    </div>
  </div>
</div>

Answer 2

您需要更改.col样式

display: inline-block;

到

display: block; float:left;：

此外，您可能希望将其宽度更改为50％。

http://jsfiddle.net/2yt09g25/2/

body {
  width: 400px;
  height: 300px;
  overflow: hidden;
  border: 1px solid black;
}

.row {
  width: 100%;
  height: 150px;
  text-align: center;
  border: 1px solid black;
}

.col {
  width: 50%;
  height: 150px;
  display: block;
  float: left;
}

.button {
  width: 100%;
  height: 100%;
}

<div id="container">
  <div class="row">
    <div class="col">
      <button class="button">This button has too much text so it shrinks and overlaps the one below it. Instead I just want the text to fill up the button</button>
    </div>
    <div class="col">
      <button class="button">Text</button>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <button class="button">Text</button>
    </div>
    <div class="col">
      <button class="button">Text</button>
    </div>
  </div>
</div>