文本和按钮在同一行上不同的字体大小

Question

我在同一行上有按钮和文字。它们具有不同的字体大小。按钮有填充。在浏览器中，似乎文本在同一行，但填充在大文本下方。我希望底部按钮填充与大文本在同一行。换句话说，将文本向下移动一点或按一下按钮。

这是我的CSS

.bigtext {
    font-size: 200%;
    border-bottom: 1px solid #999;
}

.button-container {
    display: inline-block;
}

.button-container button {
    font-size: 40%;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #d3d3d3;
}

小提琴：http://jsfiddle.net/7ydtgb7x/

Answer 1

如果你想要一个非常简单的方法来做到这一点，你可以添加“position：relative;”和“底部：5px;”到你的按钮。

如果您需要任何帮助，请添加评论告诉我。有三种立场：

跟随流程的相对。

绝对几乎跟随流程。

并修复了完全脱离任何流程的问题。

.bigtext {
    font-size: 200%;
    border-bottom: 1px solid #999;
}

.button-container {
    display: inline-block;
}

.button-container button {
    font-size: 40%;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #d3d3d3;
    position: relative;
    bottom: 5px;
}

<div class="bigtext">
    Test
    <div class="button-container">
        <button>Button</button>
    </div>
</div>

Answer 2

快速修复：

transform:translateY(-5px);

fiddle

Answer 3

这是一个可能的解决方案：

使用div包裹测试，然后.bigtext的两个孩子都已（已经）显示inline-block，只需确保他们是vertical-align:top .button-container button { vertical-align:top} 。

垂直对齐按钮，如下所示：

line-height

最后＆＃34;重置＆＃34;容器.bigtext的{​​{1}}：line-height:1

以下是完整代码的代码段：

＆＃13;

＆＃13;

.bigtext {
  font-size: 200%;
  border-bottom: 1px solid #999;
  line-height: 1
}
.bigtext > div {
  display: inline-block;
  vertical-align: top;
}
.button-container button {
  font-size: 40%;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #d3d3d3;
  vertical-align: top
}

＆＃13;

<div class="bigtext">
  <div class="text-container">Test</div>
  <div class="button-container">
    <button>Button</button>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

使用toupper或transform: translateY(-10px);