浮動一個div對齊另一個

我希望加號正確對齊，但是一旦縮小就會奇怪。這不是真正的文字。我試過float: right但是它只是不完全在文本旁邊。下面是截圖：浮動一個div對齊另一個

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% 
}

它顯示了這一點：

然而，它沒有對準他們都在一邊。你們知道我做錯了什麼嗎？我用錯了嗎？

來源

2014-10-17 kris

猜你的小提琴工作正常。：\ – Benjamin 2014-10-17 16:14:23

是的，但它太遙遠了。我需要它在「用戶帳戶」旁邊的容器中 – kris 2014-10-17 16:22:34

我編輯你的CSS我瞭解你，我希望這是你想要的:)

#side-navigation li { 
 
\t padding: 8px 5px 5px 0; 
 
\t 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{ 
 
\t font-weight: 600; 
 
\t font-size: 14px; 
 
} 
 

 
.subMenu:hover { 
 
\t background: #191919; 
 
} 
 

 
#side-navigation li:hover { 
 
\t color: white; 
 
} 
 

 
li:hover .lock{ 
 
\t background: url("") no-repeat center; \t 
 
} 
 

 
span.title { 
 
    margin:0; 
 
\t display: inline-block; 
 
} 
 

 
span.toggle { 
 
\t position:relative; 
 
    margin-left: 20px; 
 
} 
 
span{ 
 
    float:left; 
 
} 
 
li{float:left; 
 
clear:left;}

來源

2014-10-17 17:00:19

我假設id爲「邊導航」的元素是UL：

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

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

result

來源

2014-10-17 17:05:11

浮動一個div對齊另一個

回答

相關問題