CSS不會更改ul

-4

我在HTML中擁有此代碼塊，並且想要將列表更改爲內聯顯示並且沒有項目符號。CSS不會更改ul

#highlight ul { 
 
    background-color: black; 
 
    list-style-type: none; 
 
    text-decoration: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    display: inline; 
 
}

<section id="highlight"> 
 
    <div class="slide"> 
 
    <div class="container"> 
 
     <div class="slide-text"> 
 

 
     <h1>Δρ. Παναγιώτης Νομικός <span>Νευροχειρουργός</span></h1> 
 
     <p>Περιηγηθείτε στις σελίδες και ενημερωθείτε για θέματα νευροχειρουργικής.</p> 
 
     <p>Για οποιεσδήποτε απορίες σας περιμένουμε να επικοινωνήσετε μαζί μας.</p> 
 
     <ul> 
 
      <li><a href="#">ΠΕΡΙΣΣΟΤΕΡΑ --></a> 
 
      </li> 
 
      <li><a href="#">ΕΠΙΚΟΙΝΩΝΙΑ --></a> 
 
      </li> 
 
     </ul> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

但它不會改變任何東西。你知道爲什麼嗎？

我試圖更改代碼，你告訴我，但似乎沒有任何工作，也許它不是代碼，但別的東西

來源

2016-11-09 Αννα Νου.

，如果你對李直列設置，而不是UL

#highlight ul li { 
    display: inline; 
}

它應該工作

這也應該使列表式樣式冗餘。顯示：內聯塊會達到相同的結果，並會給你更多的佈局控制。

來源

2016-11-09 10:35:19

刪除display: inline;在ul並將其添加到您的li

#highlight ul li { 
    display: inline; 
}

來源

2016-11-09 10:35:32

使用display: inline-block;上#highlight ul li和#highlight ul

像這樣的東西刪除display: inline; ：

#highlight ul { 
    background-color: black; 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 
#highlight ul li{ 
    display: inline-block; 
} 
#highlight ul li a{ 
    text-decoration: none; 
    color: #fff; 
    margin-right: 1rem; 
}

見小提琴：http://jsfiddle.net/NfeVh/1400/

來源

2016-11-09 10:37:41

這些都不起作用，也許它不是代碼，但其他東西 –

什麼不工作？你檢查了小提琴鏈接嗎？ –

試試這個

#highlight ul { 
 
    background-color: black; 
 
    list-style-type: none; 
 
    text-decoration: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    display: inline; 
 
} 
 
#highlight ul li { 
 
    display: inline-block; 
 
}

<section id="highlight"> 
 
    <div class="slide"> 
 
    <div class="container"> 
 
     <div class="slide-text"> 
 

 
     <h1>Δρ. Παναγιώτης Νομικός <span>Νευροχειρουργός</span></h1> 
 
     <p>Περιηγηθείτε στις σελίδες και ενημερωθείτε για θέματα νευροχειρουργικής.</p> 
 
     <p>Για οποιεσδήποτε απορίες σας περιμένουμε να επικοινωνήσετε μαζί μας.</p> 
 
     <ul> 
 
      <li><a href="#">ΠΕΡΙΣΣΟΤΕΡΑ --></a> 
 
      </li> 
 
      <li><a href="#">ΕΠΙΚΟΙΝΩΝΙΑ --></a> 
 
      </li> 
 
     </ul> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

來源

2016-11-09 10:38:27

#highlight ul { 
 
    background-color: black; 
 
    list-style-type: none; 
 
    text-decoration: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    display: inline; 
 
} 
 

 
#highlight ul li{ 
 
    width: 30%; 
 
    display: inline; 
 
    float: left; 
 
    list-style-type: none; 
 
}

<section id="highlight"> 
 
    <div class="slide"> 
 
    <div class="container"> 
 
     <div class="slide-text"> 
 

 
     <h1>Δρ. Παναγιώτης Νομικός <span>Νευροχειρουργός</span></h1> 
 
     <p>Περιηγηθείτε στις σελίδες και ενημερωθείτε για θέματα νευροχειρουργικής.</p> 
 
     <p>Για οποιεσδήποτε απορίες σας περιμένουμε να επικοινωνήσετε μαζί μας.</p> 
 
     <ul> 
 
      <li><a href="#">ΠΕΡΙΣΣΟΤΕΡΑ --></a> 
 
      </li> 
 
      <li><a href="#">ΕΠΙΚΟΙΝΩΝΙΑ --></a> 
 
      </li> 
 
     </ul> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

來源

2016-11-09 10:43:49

回答

相關問題