Css 使用 jquery ui 并排放置列表

Question

如何将评分最高的类别内联到流派类别的右侧。目前它们是堆叠在一起的，看起来不像是一个合适的导航栏。谢谢。

<section id="menu-section">
<div class="col-md-12">
    <div class="container">
        <ul id="menu">
            <li class="ui-widget-header">Categories</li>
            <li>@Html.ActionLink("Classical", "Categories", new { category = CategoryEnum.Classical }, new { @class = "categories" })</li>
            <li>@Html.ActionLink("Alternative", "Categories", new { category = CategoryEnum.Alternative }, new { @class = "categories" })</li>
            <li>@Html.ActionLink("Blues", "Categories", new { category = CategoryEnum.Blues }, new { @class = "categories" })</li>
            <li>@Html.ActionLink("Children's", "Categories", new { category = CategoryEnum.Childrens }, new { @class = "categories" })</li>
            <li>@Html.ActionLink("Country", "Categories", new { category = CategoryEnum.Country }, new { @class = "categories" })</li>
            <li>@Html.ActionLink("Dance", "Categories", new { category = CategoryEnum.Dance }, new { @class = "categories" })</li>
            <li>@Html.ActionLink("Electronic", "Categories", new { category = CategoryEnum.Electronic }, new { @class = "categories" })</li>
            <li>@Html.ActionLink("Hip-Hop/Rap", "Categories", new { category = CategoryEnum.HipHopRap }, new { @class = "categories" })</li>
            <li>@Html.ActionLink("Instrumental", "Categories", new { category = CategoryEnum.Instrumental }, new { @class = "categories" })</li>
            <li>@Html.ActionLink("Jazz", "Categories", new { category = CategoryEnum.Jazz }, new { @class = "categories" })</li>
            <li>@Html.ActionLink("K-pop", "Categories", new { category = CategoryEnum.Kpop }, new { @class = "categories" })</li>
            <li>@Html.ActionLink("Metal", "Categories", new { category = CategoryEnum.Metal }, new { @class = "categories" })</li>
            <li>@Html.ActionLink("Opera", "Categories", new { category = CategoryEnum.Opera }, new { @class = "categories" })</li>
            <li>@Html.ActionLink("Pop", "Categories", new { category = CategoryEnum.Pop }, new { @class = "categories" })</li>
            <li>@Html.ActionLink("R&B-Soul", "Categories", new { category = CategoryEnum.RandBSoul }, new { @class = "categories" })</li>
            <li>@Html.ActionLink("Reggae", "Categories", new { category = CategoryEnum.Reggae }, new { @class = "categories" })</li>
            <li>@Html.ActionLink("Rock", "Categories", new { category = CategoryEnum.Rock }, new { @class = "categories" })</li>
            <li>@Html.ActionLink("Soundtrack", "Categories", new { category = CategoryEnum.Soundtrack }, new { @class = "categories" })</li>

            <li class="ui-widget-header rating">Top Rated</li>
            <li>@Html.ActionLink("Today", "TopRated", new { rating = RatingEnum.Today }, new { @class = "rating" })</li>
            <li>@Html.ActionLink("Weekly", "TopRated", new { rating = RatingEnum.Weekly }, new { @class = "rating" })</li>
            <li>@Html.ActionLink("30 Days", "TopRated", new { rating = RatingEnum.ThirtyDays }, new { @class = "rating" })</li>
            <li>@Html.ActionLink("All Time", "TopRated", new { rating = RatingEnum.AllTime }, new { @class = "rating" })</li>
            <li>@Html.ActionLink("Recently Published", "RecentlyPublished", new { @class = "rating" })</li>
        </ul>
    </div>
</div>

Answer 1

用另一个 ul 包裹它们:

.outer > li {
display: inline-block;
}

<ul class="outer">
    <li>
        <ul>
            <li class="ui-widget-header">Categories</li>
            <li>...</li>
            <li>...</li>
            <li>...</li>
        </ul>
    </li>
    <li>
        <ul>
            <li class="ui-widget-header rating">Top Rated</li>
            <li>...</li>
            <li>...</li>
            <li>...</li>
        </ul>
    </li>
</ul>