wordpress css make options select在行中彼此相邻显示

14ifxucb 于 11个月前发布在 WordPress

关注(0)|答案(2)|浏览(174)

我在woocommerce商店的页面上做了一个颜色选择器。在后台，客户可以做出变化并为每个变化设置颜色。在前台，客户可以选择这个颜色，然后将其添加到购物篮中。
现在的工作，是用display：inline-block使选项显示在彼此旁边。然而，当一个产品有很多颜色变化时，选项对列来说太宽了。所以我希望选项适合列宽，如果满了，从下一行开始。然而，这似乎不起作用。我尝试在父项上显示网格和显示Flex（选择），使用float：left等，但到目前为止没有成功。
我要4个项目旁边的每一个，然后另一行的四个项目。
超文本标记语言：

<select size="8" id="kleuren">
<option class="colorpicker-pick" style="border-color: rgb(255, 255, 255); background-image: url(); background-repeat: no-repeat; background-position: left center;"></option>
<option value="956" style="background-color: rgb(26, 178, 216)"></option>
<option value="960" style="background-color: rgb(221, 11, 11)"></option>
<option value="961" style="background-color: rgb(255, 255, 255)"></option>
<option value="962" style="background-color: rgb(211, 211, 211)"></option>
<option value="963" style="background-color: rgb(129, 215, 66)"></option>
<option value="964" style="background-color: rgb(221, 145, 31)"></option>
<option value="965" style="background-color: rgb(0, 0, 0)"></option>
<option value="966" style="background-color: rgb(237, 237, 7)"></option>
    </select>

字符串
有人知道吗？

wordpress

来源：https://stackoverflow.com/questions/72188664/css-make-options-select-appear-next-to-each-other-in-rows

2条答案

按热度按时间

5tmbdcev1#

不幸的是，您不能以这种方式修改select。
你可以用另一种方式使用复选框，类似于这样：
CSS

.grid-container{
    display:grid !important;
    width:100%;
    border:none;
    overflow:hidden;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

字符串
HTML

<div class="grid-container">
<label for="color1">
    Option 1
    <input type="checkbox" id="option-1" name="inputName[]">
</label>
<label for="color2">
    Option 2
    <input type="checkbox" id="option-2" name="inputName[]">
</label>
<label for="color3">
    Option 3
    <input type="checkbox" id="option-3" name="inputName[]">
</label>
<label for="color4">
    Option 4
    <input type="checkbox" id="option-4" name="inputName[]">
</label>

型

赞(0）回复(0）举报 11个月前

tzcvj98z2#

这是完全可行的！我花了一段时间才弄清楚tho lol。
将选项设置为display:inline，并在选择时添加size="2"标记。
select=2会将所有选项按行排列，然后内联的on选项会使它们排成一行。我建议将select然后 Package 在div中，并使用overflow-clip设置固定高度，因此隐藏select hack的结果的空行。
检查这个顺风Playground，例如：https://play.tailwindcss.com/boZINi1uRs

赞(0）回复(0）举报 11个月前

我来回答

wordpress css make options select在行中彼此相邻显示

2条答案

相关问题

热门标签

最新问答