不能并排设置两个 h2 元素

Question

你好，我遇到了一个简单的数学题，其中有两个并排的 h2 元素在一个表格中。表单宽度为 400px。 h2 元素有 200pxwidth 包括填充但仍然是相同大小的 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

使用行内块元素时，请务必考虑到它们之间的 space 个字符。这些元素遵循文本的正常流向，如果在 HTML.

中找到此类字符，则由一个空白字符分隔 space

将两个标签写在同一行上，中间没有 space，它们将放在同一行上：https://jsfiddle.net/9vbqwcm0/2/

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

<!-- Instead of:

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

-->

Answer 2

方法有很多种。 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 目的，我不推荐这样做。

或者float而不是

或使用flexbox

David Walsh prettily explains it incl. solutions at his blog

不能并排设置两个 h2 元素

cant set two h2 elements side by side

html

css

h2

side-by-side