个人中心
gpt4 book ai didi

html - header li + li separator 放置麻烦

转载 作者：可可西里 更新时间：2023-11-01 13:34:08 27 4
gpt4 key购买 nike

我试图在我的导航菜单之间设置一个分隔符，我发现了“li + li”功能，但我很难将分隔符放在正确的位置。我试图让它均匀地放在两个居中的占位符之间。我试过弄乱 margin 和 padding 属性，但没有成功。

这是一个 jsfiddle 以及我的代码和一个关于我正在努力实现的目标的图片示例。非常感谢任何帮助，谢谢。

enter image description here

http://jsfiddle.net/jzcZ4/

HTML/CSS

<style>

body {
    margin: 0;
    color:white;;
}

#header {
    background-color: #1c2024;
    height: 100px;
    width: 100%;
    text-align: center;
    line-height: 100px;
}

#header ul {
    margin: 0;
}

#header li {
    display:inline;
}

#header li + li {
    background:url('http://i.imgur.com/IdVT0cL.png') no-repeat;
    padding-left: 20px;
    padding-right: 20px;
}

</style>

</head>

<body>
    <div id="wrapper">
        <div id="header">
            <ul>
                <li>odsfjkoj</li>
                <li>odsfjkoj</li>
            </ul>
        </div>
    </div>
</body>

最佳答案

您将使用 background-size/background-position以便定位背景。

在这种情况下，只需使用速记:

UPDATED EXAMPLE HERE 

#header li + li {
    background: url('http://i.imgur.com/IdVT0cL.png') 8px 8px / 1px 10px no-repeat;
    padding-left: 20px;
}

关于html - header li + li separator 放置麻烦，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21468643/

27 4 0
文章推荐： html - 无法关闭 Bootstrap 标签
文章推荐： 来自的 PHPMailer 显示为根用户
文章推荐： php - 如何计算Cakephp中表格的总行数
文章推荐： php - 使用 Laravel Installer 安装 Laravel 4.1
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com