Question

我有这个下拉菜单，表现可怕，下拉列表总是比按钮大，我尝试更改两者的宽度以匹配，但是当更改屏幕大小时，它会变得很糟糕。这样做应该更容易，我在这里做错了什么？

HTML：

    <td>
       <div class="dropdown pull-left">
          <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="true"><?php echo $text_campaign_dropdown;?><span class="caret"></span></button>
          <ul class="dropdown-menu" >
             <li class="campaign-dropdown-list">  <a href="<?php echo $order['edit']; ?>" data-toggle="tooltip"  class="btn btn-primary" id="campaign-edit" ><?php echo $button_edit; ?></i></a></li>
             <li class="campaign-dropdown-list">
                <button type="submit" id="campaign-archive" name="archiveButton" value="<?php echo $order['campaign_id']; ?>" onclick="javascript:changeFormAction('<?php echo $archive; ?>');">
                <?php echo $button_archive; ?>
                </button>
             </li>
             <li class="campaign-dropdown-list">
                <button type="submit" id="campaign-del" name="deleteButton" value="<?php echo $order['campaign_id']; ?>" onclick="javascript:changeFormAction('<?php echo $delete; ?>');">
                <?php echo $button_delete; ?>
                </button>
             </li>
          </ul>
       </div>
     </td>

CSS：

button.dropdown-toggle{
 margin-top: 0;
 border-top: 0;

}
ul.dropdown-menu{
  margin-top: -1px;
  border: 0;
  padding: 0;
    background: transparent;
}
li.campaign-dropdown-list{

    box-shadow: 0 6px 12px rgba(0,0,0,.175);
    padding: 3px;
    background-image: linear-gradient(to top, rgb(31,123,144) 0.2%,rgb(41,163,194) 100%);
    background-blend-mode: color-dodge;
    color: #ffffff;
    text-align: center;

}


li.campaign-dropdown-list a{
    color: white;
    background: transparent;
}

li.campaign-dropdown-list a:hover{
    color: yellow;
    background: transparent; !important
}


li.campaign-dropdown-list:hover{

        /* background: #333322 */
         background-image: linear-gradient(to top, rgb(31,123,144) 0.2%,lightblue 100%);
}

Answer 1

使用CSS和HTML时，必须记住窗口大小的任何声明都与设置的屏幕分辨率或正在显示的窗口大小有关（仅当窗口未处于最大化状态时才适用）。避免这种情况的一种方法是直接设置所需的大小（以像素为单位）而不是比率或百分比。还要记住，填充，边距和边框会增加您声明的任何对象的大小。

下拉菜单不会与按钮保持相同的大小

1 个答案: