Question

以下是代码：

<header>
    <h1>Title</h1>
    <h2>Subtitle</h2>
</header>

有没有办法将h1左对齐，而h2与右对齐只使用内联，没有浮点数，没有绝对定位？我试过了：

header {
    width: 100%;
}

header h1 {
    display: inline-block;
    text-align:left;    
}

header h2 {
    display: inline-block;
    text-align: right;    
}

没有运气：http://codepen.io/Gasimzada/pen/qFolb

Answer 1

给它们一些宽度尺寸！如果没有，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;    
}

http://codepen.io/anon/pen/tBfHm

Answer 2

你也可以使用text-align：justify，display：table或display：flex; http://codepen.io/anon/pen/IwbBs

* {
  margin: 0px;
  padding: 0px;
  font-size: 100%;
  font-weight: inherit;
  font-family: inherit;
}

body {
    font-weight: 300;
    font-family: 'Open Sans', sans-serif;
    color: white;
}

header {
  width: 100%;
  padding: 10px;
  background: black;
}
header h1 {
  display: inline-block;
  text-align:left;
}

header h2 {
  display: inline-block;  
  text-align:right;
}
/* justify */
  .justify {
  text-align:justify;
    line-height:0px;
}
.justify * {
  line-height:1.2em;
}
.justify:after {
  content:'';
  width:99%;/* add an extra line to trigger justify on .. first-line */
  display:inline-block;
  vertical-align:top;
}
/* flex */
.flex {
  display:flex;
  justify-content:space-between;
}
/* table */
.table {
  display:table;
}
.table h1, .table h2 {
  display:table-cell;
}

...... Float已被告知：）

内联 - 阻止两个文本，一个在左边，一个在右边

2 个答案: