Блог

Главная - Вопросы по программированию - Как удалить маркеры из неупорядоченного списка, вложенного в Div?

Как удалить маркеры из неупорядоченного списка, вложенного в Div?

#html #css #list #bullet

#HTML #css #Список #маркер

Вопрос:

Я не понимаю, почему мой код не работает. Я хочу удалить маркеры в моих привязках ul. но «ul {list-style: none;} не работает.

Вот мой код:

 <div class="nav-wrapper">
    <div class="logo">
        <!-- <a href="/">Logo</a> -->
    </div>
    <div class="main-page-links">
        <ul>
            <li><a href="">MENU</a></li>
            <li><a href="">WEEKLY EVENTS</a></li>
            <li><a href="">FILLER</a></li>
            <li><a href="">FILLER</a></li>
        </ul>
    </div>
    <div class="gallery">
        <img src="" alt="image galleries">
    </div>

</div>

И вот Css:

 *{
margin: 0;
padding: 0;
box-sizing: border-box;}

body{
    height: 100%;
}

.nav-wrapper{
    display: grid;
    grid-template-columns: repeat(6, 1);
    grid-template-rows: 8;

height: 100px;
width: 900px;}

ul { list-style: none;}  /* I thought this would do it */

Комментарии:

1. Я не вижу маркеров!, это должно быть частью большего кода, и маркеры могут исходить оттуда..

Ответ №1:

Возможно, ваш браузер кэширован, попробуйте использовать control shift R на используемой вами странице, ваш код здесь в порядке

 *{
margin: 0;
padding: 0;
box-sizing: border-box;}

body{
    height: 100%;
}

.nav-wrapper{
    display: grid;
    grid-template-columns: repeat(6, 1);
    grid-template-rows: 8;

height: 100px;
width: 900px;}

ul { list-style: none;}  
 <div class="nav-wrapper">
    <div class="logo">
        <!-- <a href="/">Logo</a> -->
    </div>
    <div class="main-page-links">
        <ul>
            <li><a href="">MENU</a></li>
            <li><a href="">WEEKLY EVENTS</a></li>
            <li><a href="">FILLER</a></li>
            <li><a href="">FILLER</a></li>
        </ul>
    </div>
    <div class="gallery">
        <img src="" alt="image galleries">
    </div>

</div>

Комментарии:

1. Idk Я это уже делал, к сожалению, ничего не изменил, но все равно спасибо.

Ответ №2:

Я попробовал list-style: none, маркеры не отображаются.

 *{
margin: 0;
padding: 0;
box-sizing: border-box;}

body{
    height: 100%;
}

.nav-wrapper{
    display: grid;
    grid-template-columns: repeat(6, 1);
    grid-template-rows: 8;

height: 100px;
width: 900px;}

ul { list-style: none;}  /* I thought this would do it */  
 <div class="nav-wrapper">
    <div class="logo">
        <!-- <a href="/">Logo</a> -->
    </div>
    <div class="main-page-links">
        <ul>
            <li><a href="">MENU</a></li>
            <li><a href="">WEEKLY EVENTS</a></li>
            <li><a href="">FILLER</a></li>
            <li><a href="">FILLER</a></li>
        </ul>
    </div>
    <div class="gallery">
        <img src="" alt="image galleries">
    </div>

</div>

Комментарии:

1. Потому что я запустил это в CodePen, маркеры были скрыты, но в Firefox и chrome они все еще там….

Ответ №3:

попробуйте выполнить это с

тип стиля списка: отсутствует;

это должно работать идеально.