时间戳

首页 > 解决方案 > 在选择器内对齐文本

css - 在选择器内对齐文本

问题描述

我有一个作为组件创建的选择器：

<my-selector
    ...
</my-selector>

这是它的css文件：

my-selector{
    select {
        -webkit-appearance: none !important;
        -moz-appearance: none;
        padding: .5em;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 2px;
        padding: 3px 26px;
    }
    .select-container {
        position:relative; 
        display: inline;
        margin-right: 10px;
    }
    .select-container:after {
        content:"";  
        position:absolute; 
        pointer-events: none;
    }
    .select-container:after {
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        top: .5em;
        right: .75em;
        border-top: 5px solid black;
    }
    select::-ms-expand {
        display: none;
    }
}

在此处输入图像描述

我遇到的问题是单词和左边距之间的距离。我已经尝试过 margin-left、padding 和其他方法来删除它或让它变小但没有成功。

有什么建议么？

标签： csscss-selectorsselector

解决方案

您通过 css 为选择器添加了填充：

select {
    -webkit-appearance: none !important;
    -moz-appearance: none;
    padding: .5em;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 2px;
    padding: 3px 26px; /* this is the problem, and it's overwriting the padding attribute 4 lines up */
}

您需要删除第一次填充，然后将填充设置为：

padding: 3px 26px 3px 5px; /* top right bottom left */

推荐阅读