удалить пробелы в выпадающем меню - PullRequest
Новая
       45

удалить пробелы в выпадающем меню

0 голосов
/ 18 марта 2020

Я просто хотел скопировать какое-нибудь выпадающее меню на другой мой сайт. но, похоже, я сделал что-то не так, так что все мои выпадающие элементы имеют некоторое пустое пространство. (как на картинке) пробел сбоку выпадающих элементов

, но на первом сайте я разработал код, этой проблемы не было! (пример) пример элемента раскрывающегося списка исходного кода

на самом деле я смешал bootstrap и материализовался для формирования кода (и я знаю, что это плохая идея, но в прошлый раз это сработало для меня ). Я просто не знаю, что делать, чтобы убрать пробел! и это часть моего кода: `

<head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <!--Import materialize.css-->
    <link type="text/css" rel="stylesheet" href="{% static 'petrobavar/css/materialize.min.css' %} "
          media="screen,projection"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<nav class="mb-3">
    <div class="nav-wrapper blue-grey darken-1 amber-text darken-text-5" style="font-family: IRANSansWeb">
        <a href="#" data-target="mobile-demo" class="right sidenav-trigger"><i class="material-icons">menu</i></a>
        <a href="{% url 'petrobavar:home' %}" class="left hide-on-large-only"><img
                src="{% static 'petrobavar/petrologo.png' %}" style="width: 5rem"></a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
            <li class="tab dropdown-trigger " data-target="dropdown6" style="text-shadow: 0 2px 5px rgba(0,0,0,.5);"><a href="#">ارتباط با
                ما</a></li>
</ul>
<ul id="dropdown6" class="dropdown-content center-align" style="font-family: IRANSansWeb">
    <li><a href="{% url 'petrobavar:contact' %}" class="center-align">آدرس و تلفن های تماس</a></li>
</ul>
<style>
/* Dropdown list color */
.dropdown-content li > a, .dropdown-content li > span {
    background-color: #546e7a;
    margin: 0;
    border: 0;
    width: 100% !important;

}</style>

`

1 Ответ

0 голосов
/ 18 марта 2020

Можете ли вы просто добавить

отступ: 0;
ширина: авто! Важно;

в .dropdown-content класс в CSS файле, как показано ниже:

Мы добавили отступы и ширину в последней строке. 

.dropdown-content {
    background-color: #fff;
    margin: 0;
    display: none;
    min-width: 100px;
    overflow-y: auto;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9999;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    padding: 0;
    width: auto !important;
}

Пожалуйста, попробуйте и дайте мне знать.

...