html - 如何使 ul 列表项水平而不是垂直?

标签 html css

<分区>

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

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;

请帮忙!!!!

最佳答案

请研究... http://www.w3schools.com/css/css_navbar.aspCSS 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;
}

关于html - 如何使 ul 列表项水平而不是垂直?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38273906/

上一篇:html - 尝试将导航项与 Logo 对齐时背景图像会拉伸(stretch)

下一篇:html - 显示 : Inline-block not working for me

相关文章:

html - 强制容器保持在准确位置

html - 我正在将 HTML 转换为 Wordpress : Content on page non-cooporative

CSS:为速度/准确性指定特定元素的确切路径是否重要?

jquery - 使用 HR 标签调整文本区域的大小

html - 扩展子级以填充父级高度时避免多余的 flex/flex-grow

javascript - 如何在 Angular 9 中隐藏动态表的元素

html - 将缩略图文本悬停时,去饱和 CSS 效果无效

java - 面板主体 Bootstrap 的一致显示

php - 在 CURL 请求后用 PHP 删除

css - 自动调整div高度以填充剩余空间