兩個元素並排在外部div，一個左側，一個右側

我知道有很多類似的問題，但我無法弄清楚。兩個元素並排在外部div，一個左側，一個右側

我有以下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。爲什麼？

來源

2016-03-23 progNewbie

浮法一個左和其他權利？ – j08691

浮動的不應該用於定位你是在正確的位置與行內塊。 – DCdaz

#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>

來源

2016-03-23 13:16:27

@progNewbie雖然這會起作用，但你必須記住，這在IE上並不真正支持。 – DCdaz

@DCdaz，flexbox在IE10及更高版本中工作。但需要適當的前綴...您可以從[https://autoprefixer.github.io/]（https://autoprefixer.github.io/） –

獲得前綴。這遠非如此。有或沒有供應商前綴存在大量的錯誤。它需要一個最近版本的IE的供應商前綴的事實應該是響徹各種警鐘。 – DCdaz

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

你的意思是這樣嗎？

來源

2016-03-23 13:07:39

您可以添加浮動：權像這樣：

jsbin

來源

2016-03-23 13:14:00 ShacharW

首先你不應該使用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>

來源

2016-03-23 13:17:27 DCdaz

兩個元素並排在外部div，一個左側，一個右側

回答

相關問題