编辑Reddit Enhancement Suite的用户栏

Question

我正在尝试为我的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>
    &nbsp;(
    <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;并对齐它，但这也不起作用。

有人可以帮我吗？

Answer 1

#header-bottom-right a {
    display: block;
    float: right;
}

#header-bottom-right .separator { display: none; }

这是一种非常复杂的方法，但它是一个先发制人。如果你想继续这种方法，有足够的空间来平滑粗糙的边缘。