如何将ul列表项目放在水平而不是垂直？

Question

我想使用水平而非垂直的链接制作菜单

HTML代码

<div>
        <ul>
            <li> <a id="ccs" href="#"> Home </a> </li>
            <li> <a id="ccs" href="#"> Marketing Service </a> </li>
            <li > <a id="ccs" href="#"> IT Management Service </a> </li>
            <li > <a id="ccs" href="#"> Molex Portfolio </a> </li>
            <li > <a id="ccs" href="#"> Contact US </a> </li>
            <li > <a id="ccs" href="#"> Employment Opportunities </a> </li>
        </ul>
        </div>

CSS代码

#ccs{
    background-color:#4CAF50;
    padding:20px;

    border:3px;
    color:yellow;
    text-align:center;
    display: inline-block;
    text-decoration:none;

请帮助!!!!

Answer 1

请研究...... http://www.w3schools.com/css/css_navbar.asp或CSS Horizontal list items

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111111;
}

Answer 2

从display:inline-block;

中删除#ccs

然后使用

li { display: inline-block; }