我已经使用select
创建了Creative Tim's Material Dashboard Pro字段。
我想将选择字段及其选项向右对齐,但到目前为止,我仅设法对齐了选项,而不是其标题或所选选项:
如您在上图中所看到的,只有选项在右侧对齐,而字段的标题未对齐。
即使选择了一个选项,标题仍然是左对齐而不是右对齐。
这是我用来创建此select
字段的代码:
<select class="selectpicker" data-style="select-with-transition" title="Select One" dir="rtl">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
如何将select
字段的标题向右对齐?
所以我想出了解决方法,使用title
属性内的HTML标记并使用data-content
属性,如下所示:
<select class="selectpicker" data-style="select-with-transition" title="<p style='text-align: right; margin-right: 30px;'>Select One</p>" dir="rtl">
<option data-content="<p style='text-align: right; margin-right: 30px;'>A</p>" value="a">A</option>
<option data-content="<p style='text-align: right; margin-right: 30px;'>B</p>" value="b">B</option>
<option data-content="<p style='text-align: right; margin-right: 30px;'>C</p>" value="c">C</option>
</select>