Html 下拉按钮宽度css_Html_Css

Html 下拉按钮宽度css

html css

Html 下拉按钮宽度css,html,css,Html,Css,首先，下拉按钮工作正常。我需要更改这些按钮的宽度，使其适合窗口。但是一旦我调整了按钮的宽度，就会出现错误吗？有人能帮忙吗 -------------------------------------------------------这是密码---------------------------------------------------- .head{ width:100%; } .head a { background-color:rgb(255,205,255); width:20%

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

-------------------------------------------------------这是密码----------------------------------------------------

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

.head{
宽度：100%；
}
.头a{
背景色：rgb（25520525）；
宽度：20%；
填充：15px 0px 15px 0px；
浮动：左；
颜色：黑色；
文本对齐：居中；
文字装饰：无；
边框：1px纯红；
}
.下拉列表{
浮动：左；
宽度：19%；
}
.下拉菜单{
背景色：rgb（25520525）；
边框：1px纯红；
边界权：无；
颜色：黑色；
填充：15px 0px 15px 0px；
字体大小：继承；
字体家族：继承；
保证金：0；
}
.下拉内容{
显示：无；
位置：绝对位置；
最小宽度：160px；
盒影：5px 5px 20px灰色；
z指数：1；
}
.下拉内容a{
浮动：无；
颜色：黑色；
填充：15px；
文字装饰：无；
显示：块；
}
.头a:悬停，.下拉：悬停.dropbtn{
背景色：rgb（255182193）；
}
.下拉列表内容a：悬停{
背景色：rgb（255182193）；
}
.下拉：悬停.下拉内容{
显示：块；
}
.head>a：不是（：最后一个孩子）{
边界权：无；
}
.下拉列表内容a:非（：最后一个子项）{
边框底部：无；
}
命令

在此类

中添加宽度：100%
。下拉内容a

（用于下拉宽度）和此类

。下拉。下拉BTN

（用于按钮宽度）

.head{
宽度：100%；
}
.头a{
背景色：rgb（25520525）；
宽度：20%；
填充：15px 0px 15px 0px；
浮动：左；
颜色：黑色；
文本对齐：居中；
文字装饰：无；
边框：1px纯红；
}
.下拉列表{
浮动：左；
宽度：19%；
}
.下拉菜单{
背景色：rgb（25520525）；
边框：1px纯红；
边界权：无；
颜色：黑色；
填充：15px 0px 15px 0px；
字体大小：继承；
字体家族：继承；
保证金：0；
宽度：100%
}
.下拉内容{
显示：无；
盒影：5px 5px 20px灰色；
z指数：1；
}
.下拉内容a{
浮动：无；
宽度：100%；
颜色：黑色；
文字装饰：无；
显示：块；
}
.头a:悬停，.下拉：悬停.dropbtn{
背景色：rgb（255182193）；
}
.下拉列表内容a：悬停{
背景色：rgb（255182193）；
}
.下拉：悬停.下拉内容{
显示：块；
}
.head>a：不是（：最后一个孩子）{
边界权：无；
}
.下拉列表内容a:非（：最后一个子项）{
边框底部：无；
}


命令