浮動div對齊到另一個

Question

我希望加號正確對齊，但是一旦縮小就很奇怪。 它與實際文本不符。

我嘗試了一個float: right但是它並不恰好在文本旁邊。 這是屏幕截圖：

CSS：

span.title {
    display: inline-block;
}

span.toggle {
    position:relative;
    float: right;
}

HTML：

<li class="subMenu">
    <i class="lock"></i> 
    <span class="title">User </span>
    <span class="toggle">+</span>                                   
</li>

JSFiddle

當我做

span.title {
    padding-right: 12%
}

它顯示了這一點：

但是，它並沒有將它們全部對齊。 你們知道我做錯了什么嗎？ 我用的花車錯了嗎？

Answer 1

據我了解，我編輯了您的CSS，希望這就是您想要的：)

 #side-navigation li { padding: 8px 5px 5px 0; cursor: pointer; } .lock { background: url('../images/icon.png') no-repeat center; display: inline-block; width: 30px; height: 30px; text-align: center; vertical-align: middle; float:left; } .subMenu-link { list-style: none; padding-left: 30px; } li.subMenu span{ font-weight: 600; font-size: 14px; } .subMenu:hover { background: #191919; } #side-navigation li:hover { color: white; } li:hover .lock{ background: url("") no-repeat center; } span.title { margin:0; display: inline-block; } span.toggle { position:relative; margin-left: 20px; } span{ float:left; } li{float:left; clear:left;} 

Answer 2

我假設id為“ side-navigation”的元素是ul：

#side-navigation { float: left; clear: both; list-style: none; }
span.title { padding-right: 1em; }
span.toggle { float: right; }

結果（沒有其他CSS選擇器）：