浮动一个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对齐另一个

回答

相关问题