2

この非常に便利なStack Overflow Linkを使用して、分数のように見える「インライン」テーブルを作成しました。その写真を以下に掲載します。

テーブルで 3 対 5

すべて正常に動作するようになりましたが、次の場所にコンテンツを配置するとどうなるか見てみましょう。

プラス記号付きの 5 分の 3 (機能していません)

プラス記号は、表の上部に合わせて配置されます。だから私は疑問に思っていました、それをテーブルの中央（ビンキュラムまたは中央線の近く）に合わせる方法はありますか？

編集:ユーザーの要求により、これは私のテーブルのコードであり、プラス記号もです:

<table style="border-collapse: collapse; width: auto; float: left; margin: 2px;">
  <tbody>
    <tr><td style="text-align: center;padding: 5px; border-bottom: 1px solid black;">3</td></tr>
    <tr><td style="text-align: center; padding: 5px;">5</td></tr>
  </tbody>
</table>
+

また、上記のコードはすべて ap 要素に配置されます。

4

4 に答える 4

2

なぜテーブルを使うのですか？私はこれが良いと思います：

HTML:

<span class="fraction">
    <span>5</span>
    <span>3</span>
</span>
+
<span class="fraction">
    <span>1</span>
    <span>2</span>
</span>

CSS:

.fraction{
    display:inline-block;
    vertical-align:middle;
}
.fraction>span{
    display:block;
}
.fraction>span:first-child{
    border-bottom:1px solid black;
}

こちらをご覧ください：http://jsfiddle.net/7aQUP/

編集：

分数内に分数がある場合、バーを増やすためにパディングを追加することもできます。

.fraction>span{
    padding:0 7px;
}

こちらをご覧ください：http://jsfiddle.net/7aQUP/2/

于 2012-08-26T00:01:37.543 に答える
1

これはIE8で適切に調整されています

<table style="width: 250px;float: left;">  
   <tr>        
 <td>3+ </td>     </tr>     <tr>       
  <td>5</td>     </tr> </table>
于 2012-08-25T10:12:57.860 に答える
0

Sreenath Somanのアイデアのおかげで、p要素のパディングを増やし、ネガを使用してmargin-topテーブル全体を上に移動しました。パディングがなかったら、テーブルの半分が消えていたでしょう。それがパディングの目的でした。

于 2012-08-25T23:27:21.990 に答える
0 
<table style="border-collapse: collapse; width: auto; float: left; margin: 2px;">
    <tbody>
        <tr>
            <td style="text-align: center;padding: 5px; border-bottom: 1px solid black;">3</td>
        </tr>
        <tr>
            <td style="text-align: center; padding: 5px;">5</td>
        </tr>
    </tbody>
</table>
<table style="border-collapse: collapse; width: auto; float: left; margin: 2px;">
    <tbody>
        <tr>
            <td style="text-align: center;padding-top: 20px;">+</td>
        </tr>
    </tbody>
</table>​

これは機能しているようです。これを試してください：http://jsfiddle.net/Cg9jy/1/

于 2012-08-25T10:48:43.397 に答える