删除下拉菜单旁边的空白

我只是想将一些下拉菜单复制到我的其他网站。但似乎我做错了什么,所以我所有的下拉项目旁边都有一些空白。(如图) 下拉项旁边的空白

但在我开发的第一个站点的代码中,这个问题并不存在!(示例) 源代码下拉项示例

实际上,我混合了引导程序和物化来形成代码(我知道这是一个坏主意,但它上次对我有用)。我只是不知道该怎么做,才能消除差距!这是我的代码的一部分:`

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


幕布斯7119047
浏览 47回答 1
1回答

慕斯王

您可以只添加padding: 0;宽度:自动!重要;在CSS 文件的.dropdown-content类中,如下所示:我们在最后一行添加了填充和宽度。.dropdown-content {&nbsp; &nbsp; background-color: #fff;&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; display: none;&nbsp; &nbsp; min-width: 100px;&nbsp; &nbsp; overflow-y: auto;&nbsp; &nbsp; opacity: 0;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; left: 0;&nbsp; &nbsp; top: 0;&nbsp; &nbsp; z-index: 9999;&nbsp; &nbsp; -webkit-transform-origin: 0 0;&nbsp; &nbsp; transform-origin: 0 0;&nbsp; &nbsp; padding: 0;&nbsp; &nbsp; width: auto !important;}
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

Html5