2

我有 input type="text" 和 image 按钮，我想输入来填充 tabe 单元格。我使用Style 输入元素中的解决方案来填充其容器的剩余宽度，但是两个元素的垂直对齐有问题。我需要将元素的中心放在相同的高度上。HTML：

<table border="1" >    
  <tr><td>
      <div style="width:200px">hhhh
      </div></td><td>sssss</td>
  </tr>      
  <tr>
    <td >
      <div style='width:100%;display:table'>        
        <INPUT type='text' class='txt' ID='A12x1' NAME='A12x1'   />
        <input style='display: table-cell;' type='image' class='btn' src='http://myimages.bravenet.com/109/910/420/9/Arrow.png'/>
      </div></td><td>kpu</td>
  </tr>
</table>

CSS：

    .txt 
{ BORDER: silver 1px solid;  
  width:100%;
  vertical-align:middle;
  display: table-cell;
    }

.btn{ cursor: pointer;
       width: 18px;
    height: 26px;
    vertical-align: middle;
    }

http://jsfiddle.net/xqaN4/4/

我已经尝试了各种对齐组合，在第二位<img>，<span>或者<div>与背景图像没有成功。最好的解决方案是在 s 中包含这两个元素<div>（显示：table-cell），但是这个解决方案破坏了在 chrome 中填充宽度。

第二个问题是实现输入和按钮的高度相同。

我需要兼容 IE8+、Firefox、saf (Chrome)。
注意：图片是在网络上找到的示例。

4

1 回答 1

1

检查这个

水平对齐

http://jsfiddle.net/xqaN4/5/

.txt
{ BORDER: silver 1px solid;  
  vertical-align:middle;
  display: table-cell;
    }

垂直对齐

http://jsfiddle.net/xqaN4/7/

于 2012-08-08T11:48:39.050 回答