2つのul li要素をインラインにするには？

Question

私は自分のページにこのul要素を持っている：ここでは

  <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。しかし、私は望みの結果を得ていませんでした。インライン要素を作るのを助けてください。

Answer 1

<LI>タグではなく、タグに「表示：インラインブロック」スタイルが適用されています。それをLIタグに切り替えると、あなたのために見えるはずです。

また、このようなタグにスタイルを直接配置しないで、代わりに添付のスタイルシートを使用するようにしてください。これらのうち30個を変更しなければならないと想像してください。あなたがスタイルシートを持っていたら、小さな行を1つだけ変更すればよいのです。

Answer 2

<ul>タグでdisplay:inline-flexを試してみることができます。私はこの質問をtwitter-bootstrapとしてマークされている参照

<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>

Answer 3

。組み込みの.navクラスを使用しようとしているようですが、それを左に揃えようとしています。 .navを動作させるクラスもありません。ブートストラップナビを定義するには2つの部分（例えば、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>

Answer 4

ただ、このコードを試してみてください。 glyphiconを表示するために、我々は、ブートストラップを追加し、私は背景色と幅を追加した理由thatsの、デモとして設定heightプロパティ、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>