Html 如何更改基本按钮以适应我的下拉菜单的背景

我在网站上有一个下拉菜单。我添加了一个注销按钮，它的样式是基本的。我想让按钮的轮廓不可见，以适应背景色，但当我添加它时，它改变了按钮的内部，但轮廓是灰色的，我的文字消失了。我添加了一个图像来解释结果

<form method="POST" action="{% url "account_logout" %}" class="form-horizontal">
    {% csrf_token %}
    <div class="form-actions">
        <button type="submit" class= "navbar-logout">Logout</button>
        <input type="hidden" name="next" value="{{ request.path }}">
    </div>
</form>

---

要删除灰色边框，应执行以下操作：

.item {
  border: 0; // Or border: 1px solid #COLOR ( read up on the border attr )
  color: #FFF;
  background: none;
}

---

您仍然需要进一步设置按钮的样式（边距、对齐等）

以使按钮透明并添加白色文本“注销”。以下守则适用—

.navbar-logout {
        background: transparent;
        outline: none;
        border: 1px solid white;
        color: white;
    }

如果您想完全去掉边框，请将css中的边框更改为

.navbar-loguout{
        border: none;
}

要使按钮适合导航栏的整个宽度，请使用宽度：100%。 如果您的按钮位于作为导航栏的父容器内，则上述操作有效。将宽度设置为100%将按钮设置为父容器（即导航栏）宽度的100%

.navbar-logout{
    width:100%;
}

---

使用与下拉菜单相同的颜色：

.navbar-logout {
    border: solid 1px #000 ;
}

---

您应该使用与导航相同颜色的边框。

.navbar-logout {
    border: solid 1px #000 ;
}