文字如下div

你好，我再次我有一個問題...你看我有一個div在另一個div內，該div有文本..然而，當我把我的第二個div在我的大div的權利，文本被定位正確以及...我不能移回left:0它與left:-250px一起工作，但這不是一個很好的解決方案....我應該如何實現這一目標？文字如下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>

來源

2017-05-04 Stupid Jack

你有多個具有相同ID的元素，這是不正確的。 Id必須是唯一的 –

刪除重複的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>

來源

2017-05-04 13:24:13

但是然後綠色框在錯誤的一邊 –

讓我改變一些東西，然後等待一秒 –

啊不要忘記它是相同的東西，搞砸了東西upu –

你的CSS代碼是好的，只更改HTML代碼（你有相同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>

來源

2017-05-04 13:29:16 Ehsan

回答

相關問題