html - 使用CSS将div内的span的背景设为全尺寸

我正在尝试为我们的游戏服务器控制面板制作一个游戏服务器控制台。
现在，我遇到的一个小样式问题是，每条奇数行都需要具有稍微更亮的背景。

代替这个：


我要这个：


码：

showLoading('gameTerminal_content', '32', 'html', '');

.gameTerminal_content_outputLine:nth-of-type(odd) { width:500px; background: #4C3C33; }

    <div class="well-md" id="gameTerminal" style="background: #2A211C; height: 300px; max-width: 100%; overflow-y:scroll; font-family:'Courier New', Courier, monospace">

    <p>

    <span id="gameTerminal_content" style="color:#80FF80; width: 100%;">

    <span class="gameTerminal_content_outputLine">Line 1</span><br /><br />
    <span class="gameTerminal_content_outputLine">Line 2</span><br /><br />
    <span class="gameTerminal_content_outputLine">Line 3</span><br /><br />

    </span>

    </p>

    <!--<input type="text" name="gameTerminal_input" style="background: #4C3C33; float: left; color: #FFFFFF; width: 90%; border:none; position: absolute; bottom: 0; outline: none;" />-->

    <div id="gameTerminal_scrollHeigth"></div>

    </div>

最佳答案

如果希望跨度占用div的宽度，则希望跨度为内联块。只需添加：

.gameTerminal_content_outputLine { display: inline-block; }

片段：

showLoading('gameTerminal_content', '32', 'html', '');

.gameTerminal_content_outputLine:nth-of-type(odd) { width:500px; background: #4C3C33; }
.gameTerminal_content_outputLine {
	display: inline-block;
}

<div class="well-md" id="gameTerminal" style="background: #2A211C; height: 300px; max-width: 100%; overflow-y:scroll; font-family:'Courier New', Courier, monospace">

    <p>

    <span id="gameTerminal_content" style="color:#80FF80; width: 100%;">

    <span class="gameTerminal_content_outputLine">Line 1</span><br /><br />
    <span class="gameTerminal_content_outputLine">Line 2</span><br /><br />
    <span class="gameTerminal_content_outputLine">Line 3</span><br /><br />

    </span>

    </p>

    <!--<input type="text" name="gameTerminal_input" style="background: #4C3C33; float: left; color: #FFFFFF; width: 90%; border:none; position: absolute; bottom: 0; outline: none;" />-->

    <div id="gameTerminal_scrollHeigth"></div>

    </div>

关于html - 使用CSS将div内的span的背景设为全尺寸，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36506909/