Question

首先，下拉按钮可以正常工作。我需要更改这些按钮的宽度，使其适合窗口。但是，一旦我调整按钮的宽度大小，就会发生错误？有人可以帮忙吗？

-------------------------------------------------- --------这是代码-------------------------------------- --------------

.head{
width:100%;
}
.head a {
background-color:rgb(255,205,255);
width:20%;
padding: 15px 0px 15px 0px;
float: left;
color: black;
text-align: center;
text-decoration: none;
border:1px solid pink;
}

.dropdown {
float: left;
width:19%;
}

.dropdown .dropbtn {
background-color:rgb(255,205,255);    
border:1px solid pink;
border-right: none; 
color: black;
padding: 15px 0px 15px 0px;
font-size: inherit;
font-family: inherit;
margin: 0;
}


.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
box-shadow: 5px 5px 20px grey;
z-index: 1;
}

.dropdown-content a {
float: none;
color: black;
padding: 15px;
text-decoration: none;
display: block;
}

.head a:hover, .dropdown:hover .dropbtn {
background-color:rgb(255,182,193);
}

.dropdown-content a:hover {
background-color:rgb(255,182,193);
}

.dropdown:hover .dropdown-content {
display: block;
}

.head > a:not(:last-child){
border-right: none; 
}

.dropdown-content a:not(:last-child){
border-bottom: none; 
}

</style>
</head>
<body>

<div class="head">
  <a href="#home">Home</a>
  <a href="#news">Menu</a>
  <div class="dropdown">
    <button class="dropbtn">Orders 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Add</a>
      <a href="#">Update</a>
      <a href="#">Delete</a>
    </div>
  </div> 
  <a href="#news">Cart</a>
  <a href="#news">Logout</a>
</div>

Answer 1

在此类width: 100%（用于下拉宽度）和此类.dropdown-content a（用于按钮宽度）中添加.dropdown .dropbtn

JsFiddle

Answer 2

.head{
width:100%;
}
.head a {
background-color:rgb(255,205,255);
width:20%;
padding: 15px 0px 15px 0px;
float: left;
color: black;
text-align: center;
text-decoration: none;
border:1px solid pink;
}

.dropdown {
float: left;
width:19%;
}

.dropdown .dropbtn {
background-color:rgb(255,205,255);    
border:1px solid pink;
border-right: none; 
color: black;
padding: 15px 0px 15px 0px;
font-size: inherit;
font-family: inherit;
margin: 0;
width:100%
}


.dropdown-content {
display: none;
box-shadow: 5px 5px 20px grey;
z-index: 1;
}

.dropdown-content a {

    float: none;
    width: 100%;
    color: black;
    text-decoration: none;
    display: block;
}

.head a:hover, .dropdown:hover .dropbtn {
background-color:rgb(255,182,193);
}

.dropdown-content a:hover {
background-color:rgb(255,182,193);
}

.dropdown:hover .dropdown-content {
display: block;
}

.head > a:not(:last-child){
border-right: none; 
}

.dropdown-content a:not(:last-child){
border-bottom: none; 
}

<div class="head">
  <a href="#home">Home</a>
  <a href="#news">Menu</a>
  <div class="dropdown">
    <button class="dropbtn">Orders 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Add</a>
      <a href="#">Update</a>
      <a href="#">Delete</a>
    </div>
  </div> 
  <a href="#news">Cart</a>
  <a href="#news">Logout</a>
</div>

下拉按钮宽度CSS

2 个答案: