文本合并到右侧

Question

我正在尝试为一个社区建立一个小型的支持网站。现在我已经试着重新创建我的下拉列表，好几次了，但我看不出哪里出了问题。

当我对它进行编码时，一切都正常，问题是当我把它和导航条放在一起时，有东西把文本推到右边，并在左边生成一个小框，这样菜单就不会在下面了。

.subbtn {
font-family: Arial;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
padding: 14px;
}
.submenu {
position: relative;
display: inline-block;
}
.submenu-content {
display: none;
position: absolute;
min-width: 86px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.5);
z-index: 1;
}
.submenu-content a {
color: #0d0d0d;
padding: 14px;
text-decoration: none;
display: block;
}
.submenu:hover .submenu-content {
display: block;
}
.submenu:hover .subbtn {
color: white;
background: #403c36;
opacity: 0.8;
}
.navbar_1 {
font-family: Arial;
font-size: 14px;
list-style-type: none;
margin: 0;
padding: 0;
}
.navbar_item {
display: block;
text-transform: uppercase;
font-weight: bold;
}
.navbar_1 a {
display: inline-block;
text-align: center;
text-decoration: none;
padding: 14px;
color: #0d0d0d;
}
.navbar_1 a:hover {
color: white;
background: #403c36;
opacity: 0.8;
}

<ul class="navbar_1">
<li class="navbar_item">
<a href="#">nyheder</a>
<div class="submenu">
<div class="subbtn">information</div>
<ul class="submenu-content">
<a href="#">regler</a>
<a href="#">vedtægter</a>
<a href="#">Hvem er vi</a>
<a href="#">bestyrelsen</a>
</ul>
</div>
<a href="#">bliv medlem</a>
<a href="#">medlemsfordele</a>
<a href="#">kontakt</a>
</li>
</ul>

Answer 1

如果我理解正确，解决方案非常简单。正如isherwood所提到的，列表的左边有一个默认的填充。

我的建议是，通过将<ul>元素添加到CSS:中，给它一个固定的填充

ul {
padding: 4px; // or 0; if you prefer controlling the padding through the list items
}

那就行了！如果这不是你的意思，请在你的主题中更具体(例如使用屏幕截图(

.subbtn {
font-family: Arial;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
padding: 14px;
}
.submenu {
position: relative;
display: inline-block;
}
.submenu-content {
display: none;
position: absolute;
min-width: 86px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.5);
z-index: 1;
padding: 4px; /* <----------------------------------------- HERE */
}
.submenu-content a {
color: #0d0d0d;
padding: 14px;
text-decoration: none;
display: block;
}
.submenu:hover .submenu-content {
display: block;
}
.submenu:hover .subbtn {
color: white;
background: #403c36;
opacity: 0.8;
}
.navbar_1 {
font-family: Arial;
font-size: 14px;
list-style-type: none;
margin: 0;
padding: 0;
}
.navbar_item {
display: block;
text-transform: uppercase;
font-weight: bold;
}
.navbar_1 a {
display: inline-block;
text-align: center;
text-decoration: none;
padding: 14px;
color: #0d0d0d;
}
.navbar_1 a:hover {
color: white;
background: #403c36;
opacity: 0.8;
}

<ul class="navbar_1">
<li class="navbar_item">
<a href="#">nyheder</a>
<div class="submenu">
<div class="subbtn">information</div>
<ul class="submenu-content">
<a href="#">regler</a>
<a href="#">vedtægter</a>
<a href="#">Hvem er vi</a>
<a href="#">bestyrelsen</a>
</ul>
</div>
<a href="#">bliv medlem</a>
<a href="#">medlemsfordele</a>
<a href="#">kontakt</a>
</li>
</ul>