divの間にスペースを入れてください

Question

サークル（緑色または赤色）の状態記述子を含むhtml divを表示します。この円は、説明の右隅にあるエンニーの状態を示します。

私の問題は次のとおりです。ウィンドウのサイズが変更された場合（smaler）、説明と「状態 - サークル」が重なって表示されます。

どうすればこの問題を防ぐことができますか？ あなたはCSSコードがどのようにすべきか知っていますか？

構造は、主にこのです：私はそれを正しく理解していた場合、あなたはクラス "motortatus" の円のスタイル

.statusdiv{ 
 
    height: 40px; 
 

 
} 
 
.statusbeschreibung{ 
 

 
    position: absolute; 
 
    margin-left: 40%; 
 
} 
 
.statuskreis { 
 
    position: absolute; 
 
    width: 25px; 
 
    height: 25px; 
 
    top: 13px; 
 
    /*left: 190px;*/ 
 
    margin-left: 60%; 
 
    border: 1px solid black; 
 
    text-align: center; 
 
    border-radius: 12.5px; 
 
} 
 

 
.status-on{ 
 
    background-color: green; 
 
} 
 
.status-off{ 
 
    background-color: red; 
 
}

<div class="list-block"> 
 
        <ul> 
 
         <li> 
 
          <div class="statusdiv"> 
 
           <p class="statusbeschreibung">Motorstatus</p> 
 
           <div name="motorstatus" id="motorstatus" class="item-link statuskreis status-off"></div> 
 
          </div> 
 
         </li> 
 
</div>

Answer 1

これは元のコードのスクリーンショットイメージに基づいています。基本的にposition:absoluteの代わりにdisplay:inline-blockを使用して、テキストが重複しないようにしてから、余白を残して十分なスペーステキストとテキストの間に

.list-block ul { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.list-block li { 
 
    list-style: none; 
 
} 
 

 
.statusdiv { 
 
    white-space: nowrap; 
 
} 
 
.statusbeschreibung { 
 
    margin-left: 40%; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
.statuskreis { 
 
    width: 25px; 
 
    height: 25px; 
 
    margin-left: 10px; 
 
    border: 1px solid black; 
 
    text-align: center; 
 
    border-radius: 12.5px; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
.status-on { 
 
    background-color: green; 
 
} 
 
.status-off { 
 
    background-color: red; 
 
}

<div class="list-block"> 
 
    <ul> 
 
    <li> 
 
     <div class="statusdiv"> 
 
     <p class="statusbeschreibung">Motorstatus</p> 
 
     <div name="motorstatus" id="motorstatus" class="item-link statuskreis status-off"></div> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div class="statusdiv"> 
 
     <p class="statusbeschreibung">Motorstatus</p> 
 
     <div name="motorstatus" id="motorstatus" class="item-link statuskreis status-on"></div> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 2

。

ピクセルではなく、幅と高さをパーセントで設定してみます。これにより、ステータスサークルのサイズが変更され、説明と重複しないようにする必要があります。ただし、説明のフォントはまったく変更されず、div全体が埋め尽くされます。

Answer 3

私はこの種のもののためのインラインリストを愛していますが、好みのお好みのCSSフレームワークで列を行うことができます。

私は2つのリスト項目のそれぞれがulコンテナの幅の50％になるようにスタイルを設定しましたが、適切と思われるものを調整することができます。

* { 
 
-webkit-box-sizing: border-box; 
 
-moz-box-sizing: border-box; 
 
box-sizing: border-box; 
 
} 
 

 
.statusdiv { 
 
    list-style: none; 
 
    float: left; 
 
    margin: 0; 
 
    padding: 1em; 
 
    width: 100%; 
 
    color: #2d2d2d; 
 
} 
 

 
.statusdiv li { 
 
width: 50%; 
 
float: left; 
 
padding: 0 1em; 
 
} 
 

 
.statusdiv li:first-child { 
 
text-align: right; 
 
height: 35px; 
 
line-height: 35px; 
 
} 
 

 
.statusdiv li:last-child { 
 
text-align: left; 
 
} 
 

 
.circle { 
 
content: ""; 
 
background-color: aqua; 
 
width: 35px; 
 
height: 35px; 
 
display: inline-block; 
 
-webkit-border-radius: 100%; 
 
-moz-border-radius: 100%; 
 
border-radius: 100%; 
 
}

<!-- EDIT THIS SNIPPET --> 
 
<ul class="statusdiv"> 
 
    <li> 
 
    Status thing: 
 
    </li> 
 
    <li><span class="circle"></span></li> 
 
</ul>