Question

我应该如何让ul显示为内联。我需要一个可以在我的网站标题导航中显示内联列表的CSS

<div id="sidebar2" style="display: inline-block;">
    <div class="widget login_widget">
        <h3>My Account</h3>
        <ul class="xoxo blogroll" style="color: red;">
            <li>
                <a href="http://listing.entranceuniversity.com/author/jaysenoringmail-com/">Dashboard</a>
            </li>
            <li>
                <a href="http://listing.entranceuniversity.com/?ptype=profile">Edit Profile</a>
            </li>
            <li>
                <a href="http://listing.entranceuniversity.com/?ptype=profile">Change Password</a>
            </li>
            <li>
                <a href="http://listing.entranceuniversity.com/author/jaysenoringmail-com/?list=favourite">My Favorites</a>
            </li>
            <li>
                <a href="http://listing.entranceuniversity.com/?ptype=post_listing">Add Listing</a>
            </li>
            <li>
                <a href="http://listing.entranceuniversity.com/?ptype=login&amp;action=logout" class="signin">Logout</a>
            </li>
        </ul>
    </div>
</div>

Answer 1

这样可行

    li {
        display: inline-block;
    }

Answer 2

将此css样式添加到样式表

li {
display: inline-block;
float: left;
margin: 0 5px;
}

确保在clear: both

之后使用ul

Answer 3

试试这个，

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul li {
    display: inline;
    list-style-type: none;
    padding-right: 20px;
}

Answer 4

一开始，只需添加：

<style>
li {
display:inline;
}
</style>

Answer 5

您可以将display: inline用于列表项目：

ul.xoxo li{display:inline;}

另请注意，您需要在"内login_widget之后移除login_widget"=""，以使您的HTML标记生效。

<强> Fiddle Demo

我应该如何使此代码显示为内联

5 个答案: