将下拉项向左对齐

Posted 2023-02-24

【中文标题】将下拉项向左对齐

【英文标题】：Align dropdown items to the left

【发布时间】：2020-11-05 20:03:07

【问题描述】：

我使用引导程序在下拉列表中放置了复选框，但是它们都是居中对齐的。我想左对齐下拉项目。这是代码

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <form class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
    <label class="dropdown-item-left"><input type="checkbox" id="f1" name="result[]">AAAAA</label>
 
    <label class="dropdown-item"><input type="checkbox" id="f2" name="result[]">BBBBBBBBBB</label>

    <label class="dropdown-item"><input type="checkbox" id="f3" name="result[]">CCCCCCCCCCCCCCCCCCCC</label>
    
    <label class="dropdown-item"><input type="checkbox" id="f4" name="result[]">DDDDDDDDD</label>

    <label class="dropdown-item"><input type="checkbox" id="f5" name="result[]">EEEEEEEE</label>
  </form>
</div>

看起来是这样的：

我尝试使用单独的 css 文件使用 text-align: left、align-self 等，但它不起作用。

请帮帮我。

提前致谢。

【参考方案1】：

只有 html 文件...使用 flexbox 以正确方式对其进行排序的最简单方法。 检查sn-p

.dropdown-menu
  display: flex;
  flex-direction: column
  

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <form class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
    <label class="dropdown-item-left"><input type="checkbox" id="f1" name="result[]">AAAAA</label>
 
    <label class="dropdown-item"><input type="checkbox" id="f2" name="result[]">BBBBBBBBBB</label>

    <label class="dropdown-item"><input type="checkbox" id="f3" name="result[]">CCCCCCCCCCCCCCCCCCCC</label>
    
    <label class="dropdown-item"><input type="checkbox" id="f4" name="result[]">DDDDDDDDD</label>

    <label class="dropdown-item"><input type="checkbox" id="f5" name="result[]">EEEEEEEE</label>
  </form>
</div>

【讨论】：

我试过这个兄弟，但它不起作用，它还取消了切换功能，显示在按钮下方。

添加你的css文件，我可以查看

【参考方案2】：

您只需将dropdown-item-left 替换为dropdown-item。看看这段代码：

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown button
    </button>
    <form class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
        <label class="dropdown-item">
            <input type="checkbox" id="f1" name="result[]">AAAAA</input>
        </label>
        <label class="dropdown-item">
            <input type="checkbox" id="f2" name="result[]">BBBBBBBBBB</input>
        </label>
        <label class="dropdown-item">
            <input type="checkbox" id="f3" name="result[]">CCCCCCCCCCCCCCCCCCCC</input>
        </label>
        <label class="dropdown-item">
            <input type="checkbox" id="f4" name="result[]">DDDDDDDDD</input>
        </label>
        <label class="dropdown-item">
            <input type="checkbox" id="f5" name="result[]">EEEEEEEE</input>
        </label>
    </form>
</div>

我添加了结束标签。这是最终结果：

【参考方案3】：

输入元素的默认行为是display: inline，所以为了垂直对齐按钮和下拉菜单内容，我在 CSS 代码下方添加了dropdown-item-left .dropdown-item 类和form1 id。

我还为您的按钮添加了一些功能。现在它可以隐藏和显示菜单了。

function handleClick() 
  var form1 = document.getElementById("form1");
  if(form1.style.display === "none") 
    form1.style.display = "block";
   else 
    form1.style.display = "none";
  

.dropdown-item-left, .dropdown-item 
  display: block;


#form1 
  display: block;

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" 
          type="button"         
          id="dropdownMenuButton2" 
          data-toggle="dropdown" 
          aria-haspopup="true" 
          aria-expanded="false"
          onClick="handleClick();">
          Dropdown button
  </button>
  
  <form id="form1" class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
    <label class="dropdown-item-left"><input type="checkbox" id="f1" name="result[]">AAAAA</label>
 
    <label class="dropdown-item"><input type="checkbox" id="f2" name="result[]">BBBBBBBBBB</label>

    <label class="dropdown-item"><input type="checkbox" id="f3" name="result[]">CCCCCCCCCCCCCCCCCCCC</label>
    
    <label class="dropdown-item"><input type="checkbox" id="f4" name="result[]">DDDDDDDDD</label>

    <label class="dropdown-item"><input type="checkbox" id="f5" name="result[]">EEEEEEEE</label>
  </form>
</div>

【讨论】：

谢谢兄弟。这有帮助。