我目前正在尝试为我的subreddit编辑RES用户栏。看起来像这样:
它也会崩溃。
我想将几乎所有元素浮动到右侧,以使它们垂直对齐。该栏的html是:
<div id="header-bottom-right" class="res-navTop">
<div id="userbarToggle" title="Toggle Userbar" class="userbarHide">»</div>
<span class="user">
<a href="http://www.reddit.com/user/snowe2010/" style="margin-right: 2px;">
snowe2010
</a>
<span id="RESAccountSwitcherIcon"></span>
(
<span class="userkarma" title="">
<a title="link karma" href="/user/snowe2010/submitted/">9</a>
·
<a title="comment karma" href="/user/snowe2010/comments/">
2170
</a>
</span>
)
</span>
<span class="separator">|</span>
<a title="no new mail" href="http://www.reddit.com/message/inbox/" class="nohavemail" id="mail"></a>
<a id="mailCount" href="/message/unread/"></a>
<span class="separator">|</span>
<a title="no new mod mail" href="http://www.reddit.com/message/moderator/" class="nohavemail" id="modmail">mod messages</a>
<span class="separator">|</span>
<ul class="flat-list hover">
<li>
<a href="http://www.reddit.com/prefs/" class="pref-lang">preferences</a></li>
</ul>
<span class="separator">|</span>
<span id="openRESPrefs">
<span id="RESSettingsButton" title="RES Settings" class="gearIcon newNotification">
</span>
</span>
<span class="separator">|</span>
<form method="post" action="/logout" class="logout hover">
<input type="hidden" name="uh" value="zoimwqbhhl59526448277e691374c3d0bc47706bb35d0045b9">
<input type="hidden" name="top" value="off">
<a href="javascript:void(0)" onclick="$(this).parent().submit()">logout</a>
</form>
</div>
我目前已尝试将每个元素设置为一个块,然后向右浮动,但这不起作用。我也尝试将它们设置为显示:table-cell;并对齐它,但这也不起作用。
有人可以帮我吗?
最佳答案
#header-bottom-right a {
display: block;
float: right;
}
#header-bottom-right .separator { display: none; }
这是一种未经改进的方法,但这是一个入门。如果要继续使用此方法,则有足够的空间可以平滑粗糙的边缘。
关于css - 编辑Reddit Enhancement Suite的用户栏,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/16116123/