テキストはdivに続きます

Question

こんにちは私はもう問題があります...あなたは私が別のdivの中にdivを持っているのを見て、そのdivにテキストを入れました。しかし、私の大きなdivには、テキストも右に配置されます...そしてleft:0でそれを戻すことはできませんleft:-250pxと動作しますが、それは良い解決策にはなりません....どうすればいいですか？

#spellista { 
 
    background-color: green; 
 
    position: absolute; 
 
    right: 0; 
 
    width: 29%; 
 
    height: 100%; 
 
    top: 0; 
 
} 
 

 
#first { 
 
    left: 0 !important; 
 
    position: absolute; 
 
} 
 

 
.second { 
 
    color: red; 
 
} 
 

 
.third { 
 
    color: blue; 
 
} 
 

 
#searchBar { 
 
    height: 80%; 
 
    width: 85%; 
 
    background-color: rgba(32, 32, 45, 0.98); 
 
    position: fixed; 
 
    top: 10%; 
 
    left: 0; 
 
    z-index: 2; 
 
    margin: auto; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    border-radius: 5px; 
 
    z-index: 3; 
 
}

<div id="searchBar"> 
 
    <div id="spellista"> 
 
    <ul id='first'> 
 
     <li class="second">MOre TEXT</li> 
 
     <li class="third">TEXT</li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 1

削除重複IDの

#spellista { 
 
    background-color: green; 
 
    position: absolute; 
 
    right: 0; 
 
    width: 29%; 
 
    height: 100%; 
 
    top: 0; 
 
} 
 

 
#first { 
 
    left: 0 !important; 
 
    position: absolute; 
 
} 
 

 
.second { 
 
    color: red; 
 
} 
 

 
.third { 
 
    color: blue; 
 
} 
 

 
#searchBar { 
 
    height: 80%; 
 
    width: 85%; 
 
    background-color: rgba(32, 32, 45, 0.98); 
 
    position: fixed; 
 
    top: 10%; 
 
    left: 0; 
 
    z-index: 2; 
 
    margin: auto; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    border-radius: 5px; 
 
    z-index: 3; 
 
}

<div id="searchBar"> 
 
    <div id="spellista"> 
 
    <div id="spellista1"> 
 
     <ul id='first'> 
 
     <li class="second">MOre TEXT</li> 
 
     <li class="third">TEXT</li> 
 
     </ul> 
 
    </div 
 
    </div> 
 
</div>

Answer 2

あなたのCSSコードは、HTMLのみのコードを変更OKです（あなたが同じIDを持つ複数の要素を持っています）：

あなたのコードは次のとおりです。

<div id="searchBar"> 
    <div id="spellista"> 
    <div id="spellista"> 
     <ul id='first'> 
     <li class="second">MOre TEXT</li> 
     <li class="third">TEXT</li> 
     </ul> 
    </div 
    </div> 
</div> 

変更するには：

<div id="searchBar"> 
    <div id="spellista"> 

     <ul id='first'> 
     <li class="second">MOre TEXT</li> 
     <li class="third">TEXT</li> 
     </ul> 

    </div> 
</div> 

全コード：

#spellista{ 
 
    background-color: green; 
 
    position: absolute; 
 
    right: 0; 
 
    width: 29%; 
 
    height: 100%; 
 
    top: 0; 
 
} 
 
#first{ 
 
left:0 !important; 
 
position:absolute; 
 
} 
 
.second{ 
 
color:red; 
 
} 
 
.third{ 
 
color:blue; 
 
} 
 
#searchBar{ 
 
height:80%; 
 
width:85%; 
 
background-color:rgba(32, 32, 45, 0.98); 
 
position:fixed; 
 
top: 10%; 
 
left: 0; 
 
z-index:2; 
 
margin: auto; 
 
top: 0; 
 
right: 0; 
 
bottom: 0; 
 
border-radius:5px; 
 
z-index:3; 
 
}

<div id ="searchBar"> 
 
<div id = "spellista"> 
 
    
 
      <ul id = 'first'> 
 
      <li class = "second">MOre TEXT</li> 
 
      <li class = "third">TEXT</li> 
 
      </ul> 
 
    </div> 
 
     
 
    
 
    </div>