Question

以下HTML应该使用一些奇特的格式打印短语pass Test Case: Buzz::GetInfo( [struct BUZZINFO *] 0x1f84fa8c )。但是，它将pass放在与文本其余部分分开的一行上。我怎样才能让它们在同一条线上，使pass的边框与文本其余部分的边界相融合？

谢谢， PaulH

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title></title>   
    <style type="text/css">
    pre
    {
        border-style: solid none;
        border-width: 1px medium;
        line-height: 120%;
        padding: 5px;
        color: #333333;
        background-color: #EEFFCC; 
        border-color: #98BF21;            
        overflow: auto;
    }

    .pass
    {
        background-color: #98BF21;
        #background-color: #AACC99;
        border: 1px solid #FFFFFF;
        color: #FFFFFF;
        display: block;
        font-size: 11px;
        font-weight: bold;
        margin-left: 1px;
        outline: 1px solid #98BF21;
        padding: 3px 0 4px;
        text-align: center;
        text-decoration: none;
        width: 80px;
        font-family: verdana,helvetica,arial,sans-serif;
    }
    </style>
    </head>
<body>
<div><span class="pass">pass</span><pre>Test Case: Buzz::GetInfo( [struct BUZZINFO *] 0x1f84fa8c )</pre></div>
</body>
</html>

Answer 1

pre是块级别，您需要将其内联。此外，你需要你的“通行证”也是内联:)。这是一个有效的版本：http://jsfiddle.net/secqA/

Answer 2

从.pass

的样式中删除display: block

如果你想保持块样式，如填充，边距等，请改用display: inline-block。

Answer 3

在.pass类中，将display:block更改为display:inline 将display:inline添加到CSS for pre。

这是fiddle example它看起来很难看，因为我选择并直接将你的问题粘贴到小提琴中而不用担心添加回车。

Answer 4

<pre>默认将内容放在新行上。而是使用<code>，它将内容保持在同一行。

保持<pre> text on the same line as <span> text</span></pre>

4 个答案: