CSS浮动和一般混乱

时间：2013-02-09 23:42:40

标签： css css-float

如果这个问题太基础但CSS令人难以置信，我表示道歉。我认为我正在做一些CSS应该很容易做的事情，但它根本不像我阅读文档那样工作。

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

这是目标：

Tabs with transparent separator between them

这是我现在得到的： Where I am at

这是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中完成。

这是问题的解答：http://jsfiddle.net/zjfsy/

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

反正。这里有更多约束：

  1. 领先的栏需要扩展以填补之间的空白区域 左侧和嗖嗖声。
  2. 每个标签都需要有一个允许背景通过的分隔符。
  3. 根据客户选择，选项卡的数量是可变的 - 这些选项 可以定期更换。
  4. 我无法真正改变HTML的结构，除了 用CSS修改它。

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

2 个答案:

答案 0 :(得分：1)

这是我的解决方案：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;        
}

说明：

  • 我创建了自己的image ，并使用一些图片托管服务链接到它。

  • 您可以根据需要添加任意数量的标签（我假设每个标签都附有该图片..我不确定您最终想要的样子（右边看起来也是如此）但是我确定你可以根据自己的喜好进行调整..当添加额外的标签时，水平线会缩小..我认为当你说时你的意思是因为菜单增长，它应该推到左边，减少了线的长度

enter image description here

更新

这是更新的答案而不更改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;
}

答案 1 :(得分：0)

我还做了类似的事情，没有使用＃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的回答进行投票，因为这是一个比我更好的答案，因为它不需要带有魔术数字余量的“硬编码”等等。如果可以的话，绝对使用他的答案，但现在至少你有两个不同的方式。

相关问题
最新问题