Question

再次问好我，我有一个问题...你看到我在另一个div里面有一个div而且div里面有文字..然而当我把我的第二个div放在我的大div中的右边时，文本被定位正确...以及我无法将其移回left:0它与left:-250px一起使用但这不是一个好的解决方案......我应该如何实现这一目标？

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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代码（您有多个具有相同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>

文字跟随div

2 个答案: