制作具有不同开始，结束和休息的CSS菜单答案

【问题标题】：making a css menu with different start, end and breaks制作具有不同开始，结束和休息的CSS菜单
【发布时间】：2015-04-13 15:58:30
【问题描述】：

大家好，希望你们能帮帮我。

在这里待了一个多小时，这让我发疯了。

基本上我在 CSS 方面是个大新手，但我正在学习。目前我正在尝试复制一个如下所示的菜单：

到目前为止，我所拥有的看起来像这样（我知道字体不同但没有问题）：

如您所见，我得到了背景，但我只是不知道如何在每个选项卡之间制作开始、结束和中断（黑线部分）。

另外，基本上我的开始、休息、结束都是 .jpg 图像。不寻找 html5 或 css3 曲线等来执行此操作。只是想保持简单:)。

这是我到目前为止所得到的。如果你能给我一些关于如何让剩下的东西的提示，那就太好了，如果我使用了一种不太好的方法，请提出一种更好的方法。

html:

    <div id="header">

            <ul id="header-list">
                <li class="header-list-item">
                    <span class= "header-list-item-span" >Home</span>

                </li>

                <li class="header-list-item">
                  <span class= "header-list-item-span" >About Us</span>

                </li>
                <li class="header-list-item">
                   <span class= "header-list-item-span" >Services</span>

                </li>
            </ul>

    </div><!--END OF HEADER -->

CSS：

#header-list{
  display: table;

 position: relative;
 left: -3em;

  table-layout: fixed;
  margin-bottom: 0PX;
  margin-top: 0;
  margin-left: auto;

}

.header-list-item-span{
    background-image: url("img/menubody.jpg");
    color: white;
    display: inline-block;
    width: 5em;
    font-size: large;
    text-align: center;
    padding: .2em;
}

.header-list-item{
     display: table-cell;

 height: 4.2em;
  vertical-align:  bottom;

}

【问题讨论】：

那个黑色的东西看起来像个边框。去玩border-left 和/或border-right 和margin 推开顶部和底部。
所以你需要它作为 HTML5 还是 HTML4？
我确实试过了，但问题是边框一直向下一直向上，但这在顶部和底部之间有一些差距。

标签： css menu css-shapes

【解决方案1】：

这是一个想法：

将ul 包裹在div 中。将第一个 jpg 设置为该 div 的背景图像，并添加一些 padding-left 以便图像可见。将最后一张jpg设置为ul的背景图片，并添加一些padding-right，这样图片也可以看到。

另外，在我看来，您应该通过更多地利用 CSS 选择器来简化您的 HTML。

标题列表可以选择为div#header > ul。您使用类header-list-item 选择的项目可以使用div#header > ul > li 选择。我认为跨度实际上没有必要，您可以将样式直接应用于li 元素。

【讨论】：

【解决方案2】：

将 ul 包裹在另一个 div 中，并在内部左侧添加填充，您可以将起始图像作为背景。然后把右边的图片作为ul的背景，在右边加上padding。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title></title>
    <style>
        div,li,ul,span { margin: 0;padding: 0;}

        body  { width: 700px; margin: 0 auto; }

        #header 
        {
            background: url(http://www.lucascobb.com/wp-content/uploads/2012/02/1-plastic-navigation-bar-565x182.jpg) top center repeat;
            padding-top: 50px;
            position: relative;
        }

        #header .nav 
        {
            background: url(http://www.ultracomwireless.com/images/button_left.png) top left no-repeat;
            float: right;
            width: 413px;
            padding-left: 26px;
            margin-right: 20px;
        }

        #header .nav .nav-wrapper 
        {
            background: url(http://www.ultracomwireless.com/images/button_right.png) top right no-repeat red;
            padding-right: 26px;
        }

        #header ul 
        {
            position: relative;
            list-style: none;
        }
        #header ul li   
        {
            background: red;
            width: 120px;
            float: left;
            text-align: center; 
        }
        #header ul li span 
        {
             color: white; 
             padding: 8px 0px;
        }
        .clear { clear: both;}
    </style>
</head>
<body>


    <div id="header">
        <div class="nav">
            <div class="nav-wrapper">
                <ul>
                    <li><span>Home</span></li>
                    <li><span>About Us</span></li>
                    <li><span>Services</span></li>
                </ul>   
                <div class="clear"></div>
            </div>
        </div>
        <div class="clear"></div>
    </div>


</body>

【讨论】：

我试过了，但是开始的图片到了左上角。我能够垂直对齐底部的菜单，因为 ul 是 display:table 而 li 是 display:table-cell
给我几分钟，我会试着举一个例子。 :)
实际上我以不同的方式解决了它:).. 在开始和结束时添加了一个新的 li ，具有不同的类，使得开始和结束的类具有不同的背景（即背景是开始和结束的图像）并且由于您无法指定宽度，因此我在标记中添加了 &nbsp .. &nbsp 基本上添加了浏览器显示的空间并忽略了。如果你有另一种方法，我很乐意听到它，因为我正在学习:)
嗯......你可以这样做。哈哈 ;D 我不喜欢这个所需的包装，但同时它是更好的 html，因为当你删除所有 css 时，你会得到即将成为链接的干净列表，没有别的。我会远离因为它通常被认为是 html 混乱。