浮动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我希望这是你想要的：）

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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选择器）：