html：选择输入和周围的边缘

我试图减少几个选择框之间和之内的边距。所以它是选择内部和选择内部之间的余量。如果我缩小选择的宽度，它会切断选定的选项，但会留下边距。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>

我怎样才能让这样的：

是这样的：

来源

2011-04-06 tim

您需要设置一些级联样式表属性。左侧第二个选择框上的负边距，并将填充值设置为零像素应该可以帮助您到达想要的位置。但是，您可能不得不在这一点上处理操作系统渲染差异。

这是我的系统上工作的an example。

来源

2011-04-06 13:49:11 justkt

更好的将是**删除空白**之间的选择元素，这样你就不需要丑陋的负边'黑客' - > http://jsfiddle.net/hN6Nw/158/ – 2012-10-04 13:31:01

有时我们的眼睛（可读性）会让它们分成两行，所以摆脱空白不是这些情况的好选择，我不认为这在语义上是正确的。我愿意遵循相同的负边距方法，但使用“ems”而不是px或percentaje，因为这些最后一个与字体大小无关。那么：'select + select {margin-left：-1em}'？ – kordero 2014-10-27 21:17:40

我想你想调整自己的垫衬不是他们的保证金。

来源

2011-04-06 13:43:28 fabrik

因为每个浏览器都有所不同，所以设计一个select元素非常困难。然而，我已经改变了和width属性以删除元素中的空间。

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

来源

2011-04-06 13:45:16 DoubleYo

愿这可以帮助您：

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

来源

2011-04-06 13:56:30 SIFE

在这个例子中你的变化与宽度，而不是填充或保证金！

申请该类例如（尝试不同的宽度，直到你得到你喜欢什么）：

.comboWidth { 
    width: 30px; 
}

来源

2011-04-06 13:58:07 jackJoe

为时已晚，但对于那些有同样的问题，只是把块之间的一些HTML注释。问题与使用嵌入块块相同。如果两个块之间有任何字符，即使是制表符或\ n，屏幕上也有空白。

解决方案：

-put一切都在同一行：

<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>

-put 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>

来源

2013-12-10 10:48:49 Jova

html：选择输入和周围的边缘

回答

相关问题