0
你好，

编辑：我遵循了以下评论中提到的建议。然后，它在 IE 中运行良好，但问题仍然存在于谷歌浏览器中......有人可以帮助我......这是更改后的代码

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

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

注意：跨度的高度应该等于输入的标签，如果我们改变浏览器的分辨率，它们的对齐不应该被扭曲......

提前致谢

4

4 回答 4

6

不要在代码中做任何事情。只需删除 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;
}

另一个小提琴

于 2012-09-27T10:07:38.500 回答
2

嗨，现在他们是两种方法

冷杉是给float left;你的input和iconHolder

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

演示

其次是 定义你的跨度display:inline-block;或vertical-align:top;给父母

font-size:0;或孩子font-size:12px;根据您的设计给予

现场演示

于 2012-09-27T10:07:48.670 回答
1

将此属性添加到它们两者中浮动：左；

于 2012-09-27T10:09:53.723 回答
1

检查我的演示

这是对您的 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;
  }

已编辑

​谷歌浏览器更新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 页面。

<!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>
于 2012-09-27T10:15:18.517 回答