2

我使用这个非常有用的Stack Overflow Link创建了一个“内联”表,看起来像一个分数。它的图片如下:

三分之五在一张桌子上

现在一切正常,但是看看当它旁边的内容被放置时会发生什么:

三比五加号(不工作)

加号与表格顶部对齐。所以我想知道,有没有办法将它对齐到桌子的中间(靠近 vinculum 或中线)?

编辑:由于用户请求,这是我的表的代码,也是加号:

<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
<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 回答
0

感谢 Sreenath Soman 的想法,我增加了p元素中的 padding,并使用负数margin-top将整个表格向上移动。如果没有填充,一半的桌子会消失。这就是填充的用途。

于 2012-08-25T23:27:21.990 回答