плавающий выравнивание 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% 
} 

он показывает это:

Однако это не выравнивать их все на одной стороне. Вы, ребята, знаете, что я делаю неправильно? Я неправильно использовал float?

Answer 1

Я редактировал свой 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;}

Answer 2

Я предполагаю, что элемент с идентификатором «боковой навигации» является уль:

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

Результат (без других CSS селекторов):