gpt4 book ai didi

css - 如何将
  • 内容放在 : and after: images? 之前的中间
  • 转载 作者:行者123 更新时间:2023-11-28 12:40:17 24 4
    gpt4 key购买 nike

    我正在尝试使用 <ul> 进行导航,我有两个图像(36px 高度),它们是按钮(列表项)的左右边框。

    我用 before: 添加它们和 after:在我的 css 中,但在我这样做之后,<li> 中的链接(例如:“主要”)出现在底部,因为我添加了两个图像(之前:和之后:)。

    我希望文本像普通按钮一样位于两个图像的中间。

    Example of error

    绿色是我想要的,红色是我得到的。

    最佳答案

    感谢您尝试提供帮助,但不知何故我设法做到了。这是 CSS:

    #topmenu ul{
    list-style: none;
    padding: 0;
    }

    #topmenu ul li{
    float: left;
    margin-right: 5px;
    background-image: url('images/btnback.png');
    background-repeat: repeat-x;
    height: 36px;
    border-radius: 8px;
    }

    #topmenu ul li:before{
    content: url('images/btnLeft.png');
    float: left;
    }

    #topmenu ul li:after{
    content: url('images/btnRight.png');
    }

    这是 HTML:

    <div id="topmenu">
    <ul>
    <li>
    <a href="#">Main</a>
    </li>
    <li>
    <a href="#">About</a>
    </li>
    <li>
    <a href="#">Contact</a>
    </li>
    </ul>
    </div>

    关于css - 如何将 <li> 内容放在 : and after: images? 之前的中间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17699760/

    24 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com