浮动一个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>
当我做
span.title {
padding-right: 12%
}
它显示了这一点:
然而,它没有对准他们都在一边。你们知道我做错了什么吗?我用错了吗?
答
我编辑你的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;}
答
我假设id为“边导航”的元素是UL:
#side-navigation { float: left; clear: both; list-style: none; }
span.title { padding-right: 1em; }
span.toggle { float: right; }
结果(没有其他CSS选择):
猜你的小提琴工作正常。 :\ – Benjamin 2014-10-17 16:14:23
是的,但它太遥远了。我需要它在“用户帐户”旁边的容器中 – kris 2014-10-17 16:22:34