如何删除下拉菜单中的空白

Question

嗨，我尝试在 asp.net core MVC 中创建自己的文本编辑器。一切都很好，但我的风格有一些问题。 正如您在下图中看到的，我有一个文本颜色按钮，带有 9 种默认颜色和一个颜色选择器。但是经过大量的试验和错误，我想出了下面的代码，并且按钮之间仍然有一些空白。 （我将下拉菜单背景设置为灰色，这样我就可以清楚地看到空白是否被填充。）如何解决这个问题？而且，无论我尝试多少次，下拉菜单的大小都不能小于特定值。我也该如何解决这个问题？

    <div class="btn-group   " style="position:static;  z-index: 9999">
        <button type="button" class="btn dropdown-toggle " data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style=" z-index: 9999;">
            <img src="~/assets/theme/text-color.png" style="width:20px;height:20px;" />
        </button>
        <div class="dropdown-menu text-end " style="background-color:lightgrey; z-index:9999">
            <div class="row">
                <div class="col-4 pe-0  ">
                    <button id="@Model.button" class=" w-100    rounded-0 border border-dark " data-element="foreColor" style="height:20px;background-color:white" data-value="white">
                    </button>
                </div>
                <div class="col-4 p-0 ">

                    <button id="@Model.button" class=" w-100    rounded-0 border border-dark " data-element="foreColor" style="height:20px;background-color:black" data-value="black">
                    </button>
                </div>
                <div class="col-4 ps-0">

                    <button id="@Model.button" class=" w-100   rounded-0 border border-dark" data-element="foreColor" style="height:20px;background-color:red" data-value="red">
                    </button>
                </div>
                <div class="col-4 pe-0">

                    <button id="@Model.button" class=" w-100  rounded-0 border border-dark" data-element="foreColor" style="height:20px;background-color:yellow" data-value="yellow">
                    </button>
                </div>
                <div class="col-4 p-0">

                    <button id="@Model.button" class=" w-100  rounded-0 border border-dark " data-element="foreColor" style="height:20px;background-color:blue" data-value="blue">
                    </button>
                </div>
                <div class="col-4 ps-0">
                    <button id="@Model.button" class=" w-100 rounded-0 border border-dark" data-element="foreColor" style="height:20px;background-color:green" data-value="green">
                    </button>
                </div>
                <div class="col-4 pe-0">
                    <button id="@Model.button" class="w-100  rounded-0 border border-dark" data-element="foreColor" style="height:20px;background-color:purple" data-value="purple">
                    </button>
                </div>
                <div class="col-4 p-0">
                    <button id="@Model.button" class=" w-100  rounded-0 border border-dark" data-element="foreColor" style="height:20px;background-color:brown" data-value="brown">
                    </button>
                </div>
                <div class="col-4 ps-0">
                    <button id="@Model.button" class=" w-100  rounded-0 border border-dark" data-element="foreColor" style="height:20px;background-color:pink" data-value="pink">
                    </button>
                </div>
                <div class="col-12 py-0">
                    <input id="@Model.button" class=" w-100  " type="color" name="foreColor" value="#AABBCC">
                   @* <button id="@Model.button" class=" w-100  rounded-0 border border-dark" data-element="foreColor" style="height:20px;">
                    </button>*@
                </div>

            </div>

        </div>
    </div>

Answer 1

您可以简单地执行以下操作：

代替：

<div class="col-4 pe-0">
    <button id="@Model.button" class=" w-100 rounded-0 border border-dark" data-element="foreColor" style="height:20px;background-color:white" data-value="white"></button>
</div>
<div class="col-4 p-0">
    <button id="@Model.button" class=" w-100 rounded-0 border border-dark" data-element="foreColor" style="height:20px;background-color:black" data-value="black"></button>
</div>

这样做：

<div class="col-4 pe-0  ">
    <button id="@Model.button" class=" w-100    rounded-0 border border-dark " data-element="foreColor" style="height:20px;background-color:white" data-value="white"></button>
</div><div class="col-4 p-0 ">
    <button id="@Model.button" class=" w-100    rounded-0 border border-dark " data-element="foreColor" style="height:20px;background-color:black" data-value="black"></button>
</div>

之所以存在空白，是因为 HTML 代码中的 div 之间存在空白。 “内联元素之间的空白被解释为空格。”引用自此答案此处

如果需要，您也可以“浮动”您的元素。