Question

嗨，

编辑：我遵循了以下评论中提到的建议。然后，它在IE中工作得很好，但问题仍然存在于Google Chrome中......有人可以帮我... 。以下是更改后的代码

<!DOCTYPE HTML>
<html>
  <head>
  <style>
  .inputBox{
   white-space:nowrap;
    font-size:0;
  }
   .inputBox input{
    border:1px solid #9AAABD;
    box-shadow:inset 0px 1px 3px #b7c2d0;
    float:left;
   }
   .iconHolder{
    background:#fff url('ComboBoxArrow_regular.png') 50% 50% no-repeat;
    width:12px;
    height:19px;
    line-height:12px;
    font-size:16px;
    float:left;
}
  .iconHolder:hover{
     background:#007DC0 url('ComboBoxArrow_hover.png') 50% 50% no-repeat;
  }
  </style>
 </head>

 <body>
  <span class="inputBox">
    <input type="text">
    <span class="iconHolder"></span>
  </span>

 </body>
</html>

以下是两张图片： ComboBoxArrow_hover ComboBoxArrow_regular

我想开发一个下拉列表框。我正在使用输入字段和<span>标记，该标记将保留down arrow icon以查看列表框。
问题是输入字段和跨度之间存在不必要的差距，这真的很难看。可以消除这个差距吗？ Here是示例应用程序。在这里，我使用V进行测试，但实际上应该有一个图像。

注意：跨度的高度应该等于输入的标签，如果我们更改浏览器的分辨率，那么它的对齐不应该失真....

提前致谢

Answer 1

不要在代码中做任何事情。只需删除HTML中输入字段和跨度之间的空格即可。把它写成 -

<span class="inputBox">
    <input type="text"><span class="iconHolder">V</span>
</span>

JSFiddle

编辑：

或使元素向左浮动 -

input, .iconHolder{ float: left; }

.iconHolder{
    background:#007DC0 url('arrow.gif') 50% 50% no-repeat;
    width:12px;
    height:18px;
}

Another Fiddle

Answer 2

嗨，现在他们是两种方法

冷杉是float left; input和iconHolder

的

.inputBox input, .iconHolder{
float:left;
}

display:inline-block;

Demo

第二个定义您的范围vertical-align:top;或font-size:0;并提供给父级

font-size:12px;或孩子根据您的设计提供{{1}}

的 Live demo 的

Answer 3

将这个属性添加到它们中 float：left;

Answer 4

检查我的 Demo

以下是CSS的改变位置，

.inputBox{
   white-space:nowrap;
    font-size:0;
  }
   .inputBox input{
    border-left:1px solid #9AAABD;
    border-top:1px solid #9AAABD;
    border-bottom:1px solid #9AAABD;
    border-right:1px solid #b7c2d0;
    box-shadow:inset 0px 1px 3px #b7c2d0;
    float:left;
   }
   .iconHolder{
    background:#007DC0 url('arrow.gif') 50% 50% no-repeat;
    width:12px;
    height:18px;
    line-height:12px;
    font-size:16px;
    float:left;
}
  .iconHolder:hover{
     background:#ff6600 url('arrow2.gif') 50% 50% no-repeat;
  }

<强> EDITED

Google Chrome更新：在文本框中添加零保证金（margin:0;）。适用于我在Chrome中运行良好。

.inputBox{
}
.inputBox input{
    border-left:1px solid #9AAABD;
    border-top:1px solid #9AAABD;
    border-bottom:1px solid #9AAABD;
    border-right:1px solid #b7c2d0;
    box-shadow:inset 0px 1px 3px #b7c2d0;
    float:left;
    margin:0;
}
.iconHolder{
    background:#007DC0 url('arrow2.png') 50% 50% no-repeat;
    width:15px;
    height:20px;
    float:left; 
}
.iconHolder:hover{
    background:#ff6600 url('arrow.png') 50% 50% no-repeat;
}

UPDATE-2 ：整个HTML页面包含许多类似的Drop Downs。

<!DOCTYPE HTML>
<html>
    <head>
        <style>
            .inputBox{
            }
            .inputBox input{
                border-left:1px solid #9AAABD;
                border-top:1px solid #9AAABD;
                border-bottom:1px solid #9AAABD;
                border-right:1px solid #b7c2d0;
                box-shadow:inset 0px 1px 3px #b7c2d0;
                float:left;
                margin:0;
            }
            .iconHolder{
                background:#007DC0 url('arrow2.png') 50% 50% no-repeat;
                width:15px;
                height:20px;
                float:left; 
            }
            .iconHolder:hover{
                background:#ff6600 url('arrow.png') 50% 50% no-repeat;
            }
        </style>
    </head>

    <body>
        <span class="inputBox">
            <input type="text">
            <span class="iconHolder"></span>
        </span>

        <span class="inputBox">
            <input type="text">
            <span class="iconHolder"></span>
        </span>

        <br/>

        <span class="inputBox">
            <input type="text">
            <span class="iconHolder"></span>
        </span>

        <br/>

        <table>
            <tr>
                <td>  
                    <span class="inputBox">
                        <input type="text">
                        <span class="iconHolder"></span>
                    </span>
                </td>
                <td>
                    <span class="inputBox">
                        <input type="text">
                        <span class="iconHolder"></span>
                    </span>
                </td>
            </tr>
        </table>
    </body>
</html>

消除输入和跨度标签之间的间隙

4 个答案: