不能并排设置两个 h2 元素
cant set two h2 elements side by side
你好,我遇到了一个简单的数学题,其中有两个并排的 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>
使用行内块元素时,请务必考虑到它们之间的 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>
-->
方法有很多种。 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 元素在一个表格中。表单宽度为 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>
使用行内块元素时,请务必考虑到它们之间的 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>
-->
方法有很多种。 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