使用CSS製作div內的跨度背景全尺寸使用CSS

Question

我想爲我們的gameserver控制面板製作gameserver控制檯。 現在我有一個小樣式的問題是，每一個奇數行需要有一個稍微更亮的背景。

取而代之的是：

我想這一點：

代碼：

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"> 
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
    <p> 
 
    \t \t \t \t \t \t \t \t \t \t \t 
 
    <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 /> 
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
    </span> 
 
    
 
    </p> 
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
    <!--<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>

Answer 1

你想如果你想讓它們佔據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 { 
 
\t 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"> 
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
    <p> 
 
    \t \t \t \t \t \t \t \t \t \t \t 
 
    <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 /> 
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
    </span> 
 
    
 
    </p> 
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
    <!--<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>

Answer 2

不能你只需要添加的風格，針對偶數行使用:nth-of-type(event)是相似的，比你目前的一個靶向奇數元素稍亮：

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

更新

我沒有意識到你想擺脫元素的每一行之間的明確填充。由於要素<span>元素，你會希望把它們設置爲它們設置爲display:block：

.gameTerminal_content_outputLine { 
     display: block; 
} 

在this example看到以下證明這將使內容：

Answer 3

你想要this？ （根據你的圖片）

.gameTerminal_content_outputLine { display: block; width: 100%; }