4

我正在尝试使用 JavaScript 和 CSS 在类似电子表格的表格顶部显示下拉列表，但在对齐方面存在问题。我已将所有边框、边距和填充设置为零，但是我无法确定如何将文本（默认文本，在显示下拉列表之前）移向左上角。我曾经text-indent: -3px;让它向左移动，但是有一个3px-5px间隙（清晰可见，background-color: #888888;而不仅仅是选择边界的边缘）剪辑了左侧的文本。

有谁知道如何将基于选择的 HTML 下拉列表的文本位置移动到左上角？

编辑：

从 Chrome 添加计算样式以演示文本框和带有屏幕截图的下拉列表之间的区别。

文本框 CSS：

-webkit-border-image: none;
-webkit-line-break: after-white-space;
-webkit-nbsp-mode: space;
-webkit-user-modify: read-write;
border-bottom-color: rgb(37, 66, 100);
border-bottom-style: none;
border-bottom-width: 0px;
border-left-color: rgb(37, 66, 100);
border-left-style: none;
border-left-width: 0px;
border-right-color: rgb(37, 66, 100);
border-right-style: none;
border-right-width: 0px;
border-top-color: rgb(37, 66, 100);
border-top-style: none;
border-top-width: 0px;
color: rgb(37, 66, 100);
cursor: auto;
display: block;
font-family: Calibri, sans-serif;
font-size: 15px;
height: 18px;
left: 204px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
outline-color: rgb(37, 66, 100);
outline-style: none;
outline-width: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: absolute;
top: 21px;
white-space: pre;
width: 73px;
word-wrap: break-word;
z-index: 99;

选择 CSS：

-webkit-appearance: menulist-button;
-webkit-border-image: none;
-webkit-box-align: center;
-webkit-rtl-ordering: logical;
-webkit-user-select: none;
-webkit-writing-mode: horizontal-tb;
background-color: rgb(255, 255, 255);
border-bottom-color: rgb(37, 66, 100);
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-style: none;
border-bottom-width: 0px;
border-left-color: rgb(37, 66, 100);
border-left-style: none;
border-left-width: 0px;
border-right-color: rgb(37, 66, 100);
border-right-style: none;
border-right-width: 0px;
border-top-color: rgb(37, 66, 100);
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-top-style: none;
border-top-width: 0px;
box-sizing: border-box;
color: rgb(37, 66, 100);
cursor: default;
display: block;
font-family: Calibri, sans-serif;
font-size: 15px;
height: 16px;
left: 281px;
letter-spacing: normal;
line-height: normal;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
outline-color: rgb(37, 66, 100);
outline-style: none;
outline-width: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: absolute;
text-align: start;
text-indent: -3px;
text-shadow: none;
text-transform: none;
top: 22px;
white-space: pre;
width: 135px;
word-spacing: 0px;
writing-mode: lr-tb;
z-index: 99;

文本框 在此处输入图像描述 截图： 选择截图： 在此处输入图像描述

4

2 回答 2

2

我和你有同样的情况......可悲的是，我能想出的唯一有助于使文本更正确地对齐的方法是添加： 

<select name='something'>
<option value='nan'>&nbsp;&nbsp; Some Text Here</option>
<option value='nan'>&nbsp;&nbsp; Some Text Here</option>
</select>
于 2014-03-31T22:13:53.983 回答
1

只是为了排除基础知识，您是否尝试过：

   option, select {
      text-align: left;
      vertical-align: top;
   }
于 2013-04-05T07:14:18.747 回答