Question

我正在尝试减少几个选择框之间和之内的边距。因此它是选择和选择内部之间的差距。如果我缩小了选择的宽度，它会切断所选的选项，但会留下边距。

<html>
    <body>            
        <select>
            <option>11</option>
            <option>12</option>
            <option>13</option>
            <option>14</option>
        </select>
        <select>
            <option>15</option>
            <option>16</option>
            <option>17</option>
            <option>18</option>
        </select>
    </body>
</html>

我该如何做到这一点：

看起来像这样：

Answer 1

设置select元素的方式非常困难，因为每个浏览器都会使它不同。但是我更改了de text-indent和width属性来删除元素中的空格。

select {
    margin: 0 -2px;
    text-indent:-2px;
    width: 38px;
}

Answer 2

太晚但是对于那些有相同问题的人，只需在块之间放置一些html注释。问题与内联块块的问题相同。如果两个块之间有任何字符，甚至是制表符或\ n，则屏幕上有空格。

解决方案：

- 将所有内容放在一行：

<html>
<body>
    <select><option>11</option><option>12</option><option>13</option<option>14</option</select><select><option>15</option><option>16</option><option>17</option><option>18</option></select>
</body>

- 块之间的html评论：

<html>
    <body>            
        <select>
            <option>11</option>
            <option>12</option>
            <option>13</option>
            <option>14</option>
        </select><!--
        --><select>
            <option>15</option>
            <option>16</option>
            <option>17</option>
            <option>18</option>
        </select>
    </body>
</html>

Answer 3

您需要设置一些级联样式表属性。左侧第二个选择框的负边距并将填充设置为零像素应该可以让您到达目的地的一部分。但是，您可能必须处理操作系统渲染差异。

这是我的系统上的an example。

Answer 4

我认为你想要调整他们的填充而不是他们的边距。

Answer 5

这可以帮到你：

<select style="padding-left:0px;padding-right:0px">

Answer 6

在此示例中，您的更改与宽度有关，而不是填充或边距！

例如应用此类（尝试不同的宽度，直到得到你喜欢的东西）：

.comboWidth {
   width: 30px;
}

html：选择输入内和周围的边距

6 个答案: