无法并排设置两个 h2 元素

Question

我在简单的数学中遇到了问题，两个<h2>元素并排在一个表单中。表单宽度为 400px。 <h2>元素的宽度为 200px，包括填充，但相同大小的<h2>（靠近它）将进入新行。

https://jsfiddle.net/9vbqwcm0/1/

h2{
    display: inline-block;
    padding: 15px;
    cursor: pointer;
    margin: 0;
}
h2:first-child{
    width: 170px;
    text-align: center;
    background: #00c;
}
h2:last-of-type{
    width: 170px;
    text-align: center;
}
<form action="#" method="GET">
        <h2>Sign in</h2>
        <h2>New account</h2>
        <input type="text" name="Meno" placeholder="Meno">
        <input type="email" name="Email" placeholder="E-mail">
        <input type="password" name="Password" placeholder="Heslo">
        <label for="agree">
            <input type="checkbox" name="akceptujem" id="agree"> Agree therms of use
        </label>
        <button>Create ACC</button>
    </form>

Answer 1

有很多方法。 inline-block元素作为元素标签在行中呈现，因此如果您的 HTML 标签不在行中，它将呈现格式化的代码并将下一行转换为空格。

除了Radu Marinescu的解决方案，你也可以尝试这样做来防止它：

<h2>Sign in</h2><!--
--><h2>New account</h2>

或

<h2>Sign in</h2
><h2>New account</h2>

或负边距，如 CSS 示例margin-left:-4px

或者用div 容器包装元素并赋予它font-size:0

或者您甚至可以跳过结束标签，它将忽略间隙。

<h2>Sign in
<h2>New account

HTML5 不关心内联块元素上的关闭标签，但由于解析原因，例如 JavaScript 或一些后端代码和 SEO 目的，我不建议这样做。

或者浮动

或使用弹性框

大卫·沃尔什（David Walsh）在他的博客中漂亮地解释了它，包括解决方案。

Answer 2

使用内联块元素时，请确保考虑它们之间的空格字符。这些元素遵循文本的正常流程，如果在 HTML 中找到此类字符，则由一个空格字符分隔。

将

两个标签写在同一行上，它们之间没有空格，它们将适合同一行：https://jsfiddle.net/9vbqwcm0/2/

<h2>Sign in</h2><h2>New account</h2>
<!-- Instead of:
<h2>Sign in</h2>
<h2>New account</h2>
-->