2

input type="text" と image ボタンがあり、入力で表のセルを埋める必要があります。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>2番目に、<span>または<div>背景画像とのさまざまな配置の組み合わせを試しましたが、成功しませんでした。最善の解決策は、両方の要素を<div>s (display: table-cell) に含めることでしたが、この解決策では、クロムで幅を埋めることができませんでした。

2 番目の問題は、入力とボタンの高さを同じにすることです。

互換性 IE8+、Firefox、saf (Chrome) が必要です。
注: 画像は Web で見つかった例です。

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 に答える