无论如何,都无法在同一行中获得两个SPAN元素

时间:2013-11-06 10:09:52

标签: html css

我有一个表头,我在中间有一些写作,以及我想要左右浮动的上一个和下一个按钮。我把这些放在span元素中。左边浮动的Previous按钮工作正常,但是右边浮动的Next按钮继续进入下一行,无论如何都无法修复。我在两个跨度上都尝试了style="display:inline;",我在TH元素上尝试了style="white-space: nowrap;",但没有运气。

这是我的标题行的PHP输出(它在一行中,为了便于阅读,分为多行):

<tr>
    <th colspan="4">
         <span style="float:left;">$sPreviousTicket</span>
         $sTicketTask# $aProcess[id] - $aProcess[subject]
         <span style="float:right;">$sNextTicket</span>
    </th>
</tr>

以下是我页面上生成的HTML:

<tr>
    <th colspan="4">
        <span style="float:left;">
            <input type="button" onclick="window.location = 'view_request.php?process_id=207';" value="Previous">
        </span>
        Ticket# 209 - 3G
        <span style="float:right;">
            <input type="button" onclick="window.location = 'view_request.php?process_id=212';" value="Next">
        </span>
    </th>
</tr>

以下是输出的屏幕截图:

enter image description here

2 个答案:

答案 0 :(得分:2)

这是“推特#209 - 3G”系列推低了它。将该行放在最后,例如:

 <span style="float:left;">button...</span>
 <span style="float:right;">button...</span>
 Ticket# 209 - 3G

答案 1 :(得分:1)

请尝试以下:

span { display:inline-block; }

最终HTML

<tr>
    <th colspan="4">
        <span style="display:inline-block;">
            <input type="button" value="Previous">
        </span>
        Ticket# 209 - 3G
        <span style="display:inline-block;">
            <input type="button" value="Next">
        </span>
    </th>
</tr>