Как мне сделать этот код для отображения в строке

Question

Как мне сделать этот код для отображения в строке

0

Как заставить ul отображать встроенную строку. Мне нужен css, который может отображать список inline в заголовок навигации моего веб-сайта

<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>

user1681049 17 апр. 2014, в 04:34

Источник

0

OP действительно просит здесь отображать li в строке ul ? Вот как я это читаю (ОП сказал, что они хотят использовать его как навигационную панель)
evamvid 17 апр. 2014, в 02:35
0

да, это для навигационной панели.
user1681049 17 апр. 2014, в 04:18

Теги:

html

css

5 ответов

1

Это сработает

    li {
        display: inline-block;
    }

tylerlindell 17 апр. 2014, в 00:39

1

Попробуй это,

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

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

super 17 апр. 2014, в 00:01

1

Добавьте этот стиль css в таблицу стилей

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

Обязательно используйте clear: both после ul

Rupam 16 апр. 2014, в 23:52

0

Вначале просто добавьте:

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

evamvid 17 апр. 2014, в 01:04

Ещё вопросы

OP действительно просит здесь отображать li в строке ul ? Вот как я это читаю (ОП сказал, что они хотят использовать его как навигационную панель)
да, это для навигационной панели.

Felix · Accepted Answer · 2014-04-17T01-29-00.000Z

Вы можете использовать display: inline для своих элементов списка:

ul.xoxo li{display:inline;}

Также обратите внимание, что вам нужно удалить " после login_widget внутри login_widget"="" чтобы ваша разметка HTML стала действительной.

Демо-версия скрипта