代码如下:
<header>
<h1>Title</h1>
<h2>Subtitle</h2>
</header>
有没有一种方法可以让 h1
左对齐,h2
右对齐,只使用内联,没有 float ,没有绝对定位?我试过:
header {
width: 100%;
}
header h1 {
display: inline-block;
text-align:left;
}
header h2 {
display: inline-block;
text-align: right;
}
最佳答案
给他们一些宽度尺寸!如果没有,inline-block
元素将默认为内容的确切宽度。
header {
width: 100%;
}
header h1 {
display: inline-block;
width: 49%; /* 50% might be suitable; codepen bumped to next line at 50-50 */
text-align:left;
}
header h2 {
display: inline-block;
width: 50%;
text-align: right;
}
关于html - inline-block 两个文本,一个在左边,一个在右边,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21762351/