display: inline-block

displayは、要素の「表示形式」を指定するプロパティで、要素の表示を無くしたり（none）、ブロックレベル要素をインライン形式で表示したり（inline）、インライン要素をブロックレベル形式で表示する（block）ことができます。

「display: inline-block」とは、インライン要素のように横に並んでブロック要素のように幅や高さ、margin や padding　を指定できるという、インライン要素とブロック要素両方の特徴があります。

「float」プロパティを使わないで、番号なしリストを横並びすることが出来ます。

実施例1

• aaa
• bbb
• ccc
• ddd
• eee

HTML

<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
<li>eee</li>
</ul>

css

ul li{
　display: inline-block;　　/*li をインラインブロックで表示*/
　text-align:center;　　/*中身を中央揃え*/
　padding:5px;　　/*paddingを5pxに*/
　border:1px #333 solid;　　/*枠線*/
}

実施例2

• aaa
• bbb
• ccc
• ddd
• eee

HTML

<ul>
<li>aaa
<li>bbb
<li>ccc
<li>ddd
<li>eee
</ul>

css

ul{
　width:500px;　　/*ulの幅を設定*/
　border-top:1px #333 solid;　　/*上方向に枠線*/
　border-right:1px #333 solid;　　/*右方向に枠線*/
}
ul li{
　display: inline-block;　　/*li をインラインブロックで表示*/
　box-sizing:border-box;　　/*パディングと枠線を幅と高さに含める*/
　text-align:center;　　/*中身を中央揃え*/
　padding:5px;　　/*パディングを5pxに*/
　width:20%;　/*liの幅を設定*/
　border-left:1px #333 solid;　　/*左方向に枠線*/
　border-bottom:1px #333 solid;　　/*下方向に枠線*/
}