CSSの

Question

を使用して、div内のスパンの背景をフルサイズにする私たちのゲームサーバーのコントロールパネル用のゲームサーバーコンソールを作成しようとしています。 私が持っている小さなスタイリングの問題は、すべての奇数ラインが少し明るい背景を持つ必要があるということです。

の代わりにこの：

コード：

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

は、あなただけの偶数ラインをターゲットにしたスタイルを追加できませんでした

私はこれが欲しいですを使用して

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

アップデート私はあなたが要素の各列の間の明示的なパディングを取り除くために望んでいたが実現しなかった

：同様の奇数の要素をターゲットにし、あなたの現在の1よりもやや明るくなっ。要素が<span>要素なので、あなたはdisplay:blockにそれらを設定するためにそれらを設定したい：

this exampleで見られるし、以下に示すようなコンテンツをレンダリングするでしょう

.gameTerminal_content_outputLine { 
     display: block; 
} 

：

Answer 3

あなたはthisを望んでいますか？ （あなたの写真による）

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