Question

我知道有很多类似的问题，但我无法理解。

我有以下div：

#inputHeader {
  width: 100%;
  background: #30273a;
  border-radius: 10px 10px 0px 0px;
}
#inputHeaderTitle {
  color: white;
  margin-left: 10px;
  display: inline-block;
}
#inputHeaderEdit {
  color: white;
  display: inline-block;
}

<div id="inputHeader">
  <p id="inputHeaderTitle">Header</p>
  <span id="inputHeaderEdit" class="glyphicon glyphicon-pencil"></span>
</div>

我想在div的左侧使用“inputHeaderTitle”，在右侧使用“inputHeaderEdit”-span。我怎么能这样做？

修改

这是一个jsfiddle：https://jsfiddle.net/9nuhay76/1我在那里浮动：左/右。但如果我这样做，外部DIV的高度为0px。为什么呢？

Answer 1

#inputHeader {
  width: 100%;
  background: #30273a;
  border-radius: 10px 10px 0px 0px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
}
#inputHeaderTitle {
  color: white;
  display: inline-block;
  flex: 1;
}
#inputHeaderEdit {
  color: white;
  display: inline-block;
}

<div id="inputHeader">
  <p id="inputHeaderTitle">Header</p>
  <span id="inputHeaderEdit" class="glyphicon glyphicon-pencil">Edit</span>
</div>

Answer 2

<div id="inputHeader">
 <p id="inputHeaderTitle" style="float:left">Header</p>
 <span id="inputHeaderEdit" style="float:right" class="glyphicon glyphicon- pencil"></span>
</div>

你的意思是这样吗？

Answer 3

你可以添加float：right 像这样：

jsbin

Answer 4

首先，你不应该使用float进行定位。你在显示内联块的正确位置。

尝试使用显示表，然后使用文本对齐方式将它们向左或向右定位。

#inputHeader {
  width: 100%;
  background: #30273a;
  border-radius: 10px 10px 0px 0px;
}
#inputHeaderTitle {
  color: white;
  margin-left: 10px;
  display: inline-block;
}
#inputHeaderEdit {
  color: white;
  display: inline-block;
}

/* NEW */

.align-table {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.t-align {
  display: table-cell;
  vertical-align: top;
  width: 100%;
}
.align-center {
  text-align: center;
}
.align-left {
  text-align: left;
}
.align-right {
  text-align: right;
}

<div id="inputHeader" class="align-table">
  <div class="t-align">
    <p id="inputHeaderTitle">Header</p>
  </div>
  <div class="t-align align-right">
    <span id="inputHeaderEdit" class="glyphicon glyphicon-pencil"></span>
  </div>
</div>

外部div中并排有两个元素，一个是左侧，另一个是右侧

4 个答案: