如何製作兩個ul li元素內聯？

我有這樣的一個UI元素在我的網頁：如何製作兩個ul li元素內聯？

  <ul class="nav pull-left" style="width: 90px; list-style-type: none;margin: 0; padding: 0;">    
       <li><a href="#" style="display: inline-block;text-align: center;"><i class="glyphicon glyphicon-tree-conifer"></i> <br> sites</a></li> 
       <li><a href="#" style="display: inline-block;text-align: center;"><i class="glyphicon glyphicon-tree-conifer"></i> <br> events</a></li>   
      </ul>

這裏它的外觀：

我需要改變上述外觀，使這兩個元素的內聯：

我試過example。但是我沒有得到想要的結果。請幫助我對元素進行內聯。

來源

2016-10-07 Michael

您將「display：inline-block」樣式應用於<A>標記，而不是<LI>標記。切換到LI標籤，它應該看起來適合你。此外，您應該儘量避免將樣式直接放置在這樣的標籤上，而是使用附加的樣式表。想象一下，你必須改變其中的30個，這將是一個巨大的痛苦。如果你有一個樣式表，你只需要改變一行。

來源

2016-10-07 16:06:45

你有什麼想法當我在鼠標中定位標籤時，如何刪除突出顯示？ – Michael

如果我理解你的問題，好像你想要像這樣添加一行到你的文件中：但是請注意，全部放置在附加的樣式表中，而不是直接放在HTML本身中。您可以嘗試將其直接添加到HTML，但要測試它，看看是否可以解決您的問題 –

這裏我發佈了一個問題：http://stackoverflow.com/questions/39922487/how-to-remove-highlighting-on-錨元件 – Michael

您可以嘗試在<ul>標記中使用display:inline-flex。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 

 
<ul class="nav pull-left" style="width: 90px; list-style-type: none;margin: 0; padding: 0;display:inline-flex;"> 
 
    <li><a href="#" style="text-align: center;"><i class="glyphicon glyphicon-tree-conifer"></i> <br> sites</a> 
 
    </li> 
 
    <li><a href="#" style="text-align: center;"><i class="glyphicon glyphicon-tree-conifer"></i> <br> events</a> 
 
    </li> 
 
</ul>

來源

2016-10-07 16:16:32

我看到這個問題被標記爲twitter-bootstrap。看起來你正嘗試使用內置的.nav類，但你也試圖將它左對齊。你也錯過了一個類，使.nav工作。定義引導程序導航需要兩個部分（例如，nav nav-navbar,nav nav-pills）。我會推薦使用.nav-pills。這將使得pull-left不必要，您可以將其刪除。您還應該刪除這些內聯樣式。要使圖形居中，只需使用.text-center或創建自定義樣式。請不要內聯樣式。

@import url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css)

<ul class="nav nav-pills">    
 
    <li><a href="#" class="text-center"><i class="glyphicon glyphicon-tree-conifer"></i><br>sites</a></li> 
 
    <li><a href="#" class="text-center"><i class="glyphicon glyphicon-tree-conifer"></i><br>events</a></li>   
 
</ul>

來源

2016-10-07 16:21:03

與此代碼試試看。查看glyphicon一定要加引導，而這就是爲什麼我添加了背景顏色和寬度，高度屬性設置爲演示，複製這個粘貼到一個HTML頁面

.nav li { 
 
    display:inline-block; 
 
    width:47%; 
 
    background:#999; 
 
} 
 
.nav li i { 
 
    background: #000 none repeat scroll 0 0; 
 
    display: block; 
 
    height: 10px; 
 
    width: 10px; 
 
    margin:0 auto; 
 
}

<ul class="nav pull-left" style="width: 90px; list-style-type: none;margin: 0; padding: 0;"> 
 
    <li><a href="#"><i class="glyphicon glyphicon-tree-conifer"></i>sites</a></li> 
 
    <li><a href="#"><i class="glyphicon glyphicon-tree-conifer"></i>events</a></li> 
 
</ul>

來源

2016-10-07 16:28:28

如何製作兩個ul li元素內聯？

回答

相關問題