删除下拉菜单旁边的空白



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

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

实际上,我混合了bootstrap和realize来形成代码(我知道这是个坏主意,但上次对我有效(。我只是不知道该怎么办,才能消除差距!这是我代码的一部分:`

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

`

你能不能只添加

填充:0
宽度:自动!重要


.下拉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;
}

请试着告诉我。

最新更新