css - CSS 浮动和一般混淆

Question

如果这是一个太基本的问题，我很抱歉，但 CSS 让我感到困惑。我认为我正在做一些 CSS 应该很容易做到的事情，但它根本不像我阅读文档的方式那样工作。

这是我的例子。它已被大大简化，但基本问题仍然存在。我确信这是我的一些核心误解，我只是不知道它在哪里。

这是目标：

标签之间有透明分隔符

这是我现在得到的：我在哪里

这是HTML：

<div id="line-wrapper">
    <div id="block-nice-menus-1">
        <ul id="nice-menu-1">
            <li><span title="Departments" class="nolink">Departments</span>

            </li>
        </ul>
    </div>
    <div id="block-imageblock-40">
        <img src="http://www.kallenconsulting.com/home/files/top-menu-swish.png"
        alt="" />
    </div>
    <div id="block-imageblock-42">
        <img src="http://www.kallenconsulting.com/home/files/Transparent-4x6.png"
        alt="" />
    </div>
</div>

这是CSS：

/* -- nice-menu-1 is Main Menu -- */
#line-wrapper {
    background-color: #ff0000;
}
#block-nice-menus-1 {
    position: relative;
    float: right;
    margin-right: 0px;
    height: 40px;
    border: none;
    background: #d6b982;
}
#nice-menu-1 {
    display: block;
    padding: 0px 30px;
    border-top: none;
    border-bottom: none;
    color: #000;
    background: #d6b982;
    line-height: 2.4em;
    font-weight: bold;
    font-family: Helvetica, Arial, Sans-Serif;
    text-transform:uppercase;
    text-decoration: none;
}
#nice-menu-1 ul, #nice-menu-1 li {
    border-top: none;
    border-bottom: none;
    border-color: #e11837;
}
#block-imageblock-40 {
    /* top-menu-swish */
    float: right;
    margin: 0px;
}
#block-imageblock-42 {
    /* top-menu-leading-line */
    bottom: 0px;
    height:6px;
    width:100%;
    background: #d6b982;
}

我无法得到正确的浮动（我知道，还有另一个浮动问题）。主要问题是这将是一个包含可变数量项目的菜单，因此随着菜单的增长，（现在是“部门”，但后来是“部门”、“服务”、“部分”等）它应该向左推，减少线的长度我不能在引导线上使用固定长度（#block-imageblock-42）。此外，菜单项将有分隔符，所以我不能只是全角的东西。这需要在纯 CSS 中完成，而不是 jQuery 或其他 JS。

这是我的问题的 JSfiddle：http: //jsfiddle.net/zjfsy/

更新： 根据人们试图提供帮助的要求，我已将问题修改为更具体。顶部的“目标”图像已更新，以更准确地反映问题。我真正想澄清的一件事是，这个具体的例子并不那么重要。我已经修改了一个立场：短期内的绝对解决方案。我的愿望是更好地理解为什么这如此困难。我有三个容器。我希望其中两个向右浮动，第三个扩展以填充从最后一个容器到页面边缘的空间。这似乎是 float 应该做的。我认为这是我的一些基本误解。

反正。这里有更多的限制：

前导条需要扩展以填充左侧和嗖嗖声之间的空白空间。
每个选项卡都需要有一个分隔符，允许背景通过。
选项卡的数量是可变的，取决于客户的选择——可以定期更改。
除了用 CSS 修改它之外，我无法真正改变 HTML 的结构。

再次，非常感谢所有帮助。

score 1 · Accepted Answer

这是我的解决方案：http: //jsfiddle.net/abbood/b56Vq/（以前从未使用过jsfiddle ..如果我做错了，或者我应该分叉你的项目，我很抱歉）

这是代码：

<html>
    <head>
        <link href="betterStyle.css" rel="stylesheet">
    </head>
    <body>
        <div id="wrapper">
            <ul>
                <li><div></div><div>Departments</div></li>
                <li><div></div><div>Services</div></li>
                <li><div></div><div>Sections</div></li> 
                <li><div></div><div>stuff</div></li> 
            </ul>
        </div>
    </body>
</html>

//betterStyle.css

#wrapper {
    height: 2.5em;
    background-color: #e0203b;
    background-image: url('http://s11.postimage.org/a1jmymlgv/bage_Box.png');            
    background-position: bottom;
    background-repeat: repeat-x;  
}

ul
{
    list-style-type: none;
    float: right;
    margin: 0;
    padding: 0;
}

ul li {
    float: right ;
    display: inline-block;        
}

/* text */
ul li div:nth-child(2) {        
    line-height: 2.5em;
    line-weight: bold;
    font-family: Helvetica, Arial, Sans-Serif;
    text-transform: uppercase;
    background-color: #d6b982;
    float: right;
    padding-right: 1em;
}

/* image */
ul li div:nth-child(1) {
    background-image: url('http://s8.postimage.org/b2qycoatd/top_menu_swish.png');
    background-position: left top;
    background-repeat: no-repeat;  
    float: left;


    width: 53px;
    height: 40px;
    line-weight: bold;
    font-family: Helvetica, Arial, Sans-Serif;
    text-transform: uppercase;        
}

笔记：

我创建了自己的图像，并使用一些图像托管服务链接到它。
您可以根据需要添加任意数量的选项卡（我假设每个选项卡都会附加该图像..我不确定您希望最终的外观如何（右边缘看起来太锋利）..但我'确定你可以根据自己的喜好调整它..添加额外的标签时，水平线会缩小..我认为这就是你所说的意思，所以随着菜单的增长，它应该向左推，减少线的长度

在此处输入图像描述

更新：

这是更新后的答案，无需更改 html 中的一行：http: //jsfiddle.net/abbood/SkxkC/（出于某种原因，jsfiddle 中的文件夹图像下有一个凹凸。我在 mac chrome/safari/ 上对其进行了测试Firefox，他们工作得很好..让我知道它是否不适合你）

html（几乎相同..只是为了好玩而添加了几个标签）：

    <body>
        <div id="line-wrapper">
            <div id="block-nice-menus-1">
                <ul id="nice-menu-1">
                    <li><span title="Departments" class="nolink">Departments</span>

                    </li>
                    <li><span title="Departments" class="nolink">Services</span>

                    </li>
                    <li><span title="Departments" class="nolink">Classes</span>

                    </li>

                </ul>

            </div>
            <div id="block-imageblock-40">
                <img src="http://www.kallenconsulting.com/home/files/top-menu-swish.png"
                alt="" />
            </div>
            <div id="block-imageblock-42">
                <img src="http://www.kallenconsulting.com/home/files/Transparent-4x6.png"
                alt="" />
            </div> 
        </div>
    </body>

CSS：

/* -- nice-menu-1 is Main Menu -- */
#line-wrapper {
    background-color: #ff0000;  /* red */
    height: 40px;
    position: relative;
    z-index: -2;
}

#line-wrapper div {
    background-color: #ff0000;  /* red */
}
#block-nice-menus-1 {
    position: relative;
    float: right;
    margin-right: 0px;
    height: 40px;
    border: none;
    background: #d6b982;
}
#nice-menu-1 {
    display: block;

    border-top: none;
    border-bottom: none;
    color: #000;

    line-height: 2.4em;
    font-weight: bold;
    font-family: Helvetica, Arial, Sans-Serif;
    text-transform:uppercase;
    text-decoration: none;
    margin: 0;
    padding: 0;
}

#nice-menu-1 ul {
    padding: 0;
        background-color: #ff0000;  /* red */
}
#nice-menu-1 ul, #nice-menu-1 li {
    border-top: none;
    border-bottom: none;
    border-color: #e11837;
}

#nice-menu-1 li{
    list-style-type: none;
    display: inline-block;
    padding: 0 2em;
    background: #d6b982;    /* bage */
    height: 40px;
}
#block-imageblock-40 {
    /* top-menu-swish */
    float: right;
    margin: 0px;
}
#block-imageblock-42 
{
    /* top-menu-leading-line */
    bottom: 0px;
    height:6px;
    width:100%;
    background-color: #d6b982 !important;
    position: absolute;
    z-index: -1;
}

score 0 · Accepted Answer

我也做了类似的事情，不使用#line-wrapper 的 position:relative 特性，因为这可能会在你实现它时给你带来一些问题。

见http://jsfiddle.net/zjfsy/

#block-imageblock-42 {
/* top-menu-leading-line */
height:6px;
width:100%;
background: #d6b982;
position:absolute;
margin-top:34px;
}

#line-wrapper {   
display: block;
height: 40px;
width: 100%;
background-color: #ff0000;
}

希望这可以帮助！（我肯定会投票 wxactly 的答案，因为它比我的答案更好，因为它不需要带有幻数边距的“硬编码”等。如果可以的话，绝对使用他的答案，但现在至少你有两个不同的方法。

css - CSS 浮动和一般混淆

2 回答 2

Related

Reference