CSS 下拉框在网页设计中经常被用到,可以方便用户选择需要的选项。其中一个问题就是如何让下拉框中选项的字体在左右两侧居中显示。下拉框样式: .select-box { position: relati
CSS 下拉框在网页设计中经常被用到,可以方便用户选择需要的选项。其中一个问题就是如何让下拉框中选项的字体在左右两侧居中显示。
下拉框样式: .select-box { position: relative; display: inline-block; width: 200px; height: 30px; border: 1px solid #ddd; } 下拉箭头样式: .select-arrow { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 0; height: 0; border-style: solid; border-width: 5px 5px 0 5px; border-color: #777 transparent transparent transparent; } 下拉列表样式: .select-options { position: absolute; top: 100%; left: 0; width: 100%; border: 1px solid #ddd; background-color: #fff; }
为了实现下拉框中字体的左右居中显示,我们可以在 .select-options
中的每个选项中再套用一个 span
标签,并对其样式进行调整。
下拉选项样式: .select-options span { display: inline-block; width: 100%; text-align: center; } .select-options span:before { content: ""; display: inline-block; width: 50%; height: 0; } .select-options span:after { content: ""; display: inline-block; width: 50%; height: 0; }
以上样式中,:before
和 :after
选择器用来生成一个宽度为50%的空白块,将选项中的文本内容分别放在两个空白块中,就可以实现左右对齐并居中显示了。
当然,如果你想让下拉框中选项的字体大小、颜色、行高等样式和默认字体样式有所区别,也可以在 .select-options span
中自定义相应样式。
粉丝
0
关注
0
收藏
0