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

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

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

＆＃13;

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

＆＃13;

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元素

2 个答案: