私はCSSに新しいです国境のエッジ

Question

上のアイコンを配置し、次のような効果を達成しようとしている：私は、各セル内の短いテキスト行を持つテーブルがある

を、私は1-N小さいアイコンを置きたいです セルの境界線の中央にあります。

それを視覚化に役立つかもしれない小さなスケッチ：

http://img200.imageshack.us/img200/6506/sketcha.jpg

私はすべての指導のためにthankfullだろう。

Answer 1

あなたの最善の策は、箱の上にpositon：relativeを使用し、アイコンを内側に置き、position：absoluteを使用してコンテンツ内のスペースを取らずに置きます。このように：

HTML：

<div id="wrapper"> 
    <img id="icon1" src="/path/to/image.png" alt="alt text" /> 
    <img id="icon2" src="/path/to/image.png" alt="alt text" /> 
</div> 

CSS：そのような

#wrapper { position:relative; z-index:1; } 
    #wrapper img { position:absolute; top:-10px; width:20px; height:20px; z-index:10; } 
    #icon1 { right:10px; } 
    #icon2 { right:40px; } 

何か。実際の寸法は、アイコン自体のサイズと配置に基づいていますが、これは仕事を完了させるでしょう。あなたは絶対位置に行きたくない場合は

Answer 2

ここでは、これを実行する方法の非常に基本的な例を示します。これはテストなしでコード化されていたので、必要に応じて調整する必要があります。

<style type="text/css"> 

    .buttonCell 
    { 
     position: relative; 
    } 

    .button1, .button2 
    { 
     float: right; 
     height: 15px; /* or whatever */ 
     margin-right: 5px; 
     width: 15px; /* or whatever */ 
     top: -8px; /* or whatever */ 
    } 

    .button1 
    { 
     background: url(path/to/image.ext) no-repeat top left; 
    } 

    .button2 
    { 
     background: url(path/to/image.ext) no-repeat top left; 
    } 

</style> 
<table> 
<tbody> 
    <tr> 
     <td class="buttonCell"> 
      <div class="button1"></div> 
      <div class="button2"></div> 
      Text text text 
     </td> 
    </tr> 
</tbody> 
</table> 

Answer 3

CSS属性の位置を使用します内容を包むDIV上の必要に応じて、トップと一緒に、絶対、左右の属性：TDスタイルと位置の相対を。

目的の効果を得ることができるはずです。

Answer 4

多分これを実行します。

<style type="text/css"> 
    .box {width:200px; height:200px; border:solid 5px #ccc;} 
    .icon1, .icon2 { display:block; width:30px; height:15px; background:black; margin-right:10px; margin-top: -10px; float:left;} 
</style> 


<div class="box"> 
    <span class="icon1"></span> 
    <span class="icon2"></span> 
</div>