Question

我正在开发visual studio express 2013并使用默认模板创建基于webform的默认项目，如链接http://codepen.io/anon/pen/dPWzRd

所示

出于某种原因Header＆amp;页脚元素显示为我们的主要包装器，因为它在codepen示例中显示。我尝试使用几个css属性，但它打破了设计。

<header>
        <div class="header-wrapper">
            <div class="float-left">
                <p class="site-title"><a href="./"> logo here</a></p>
            </div>
            <div class="float-right">
                <nav>
                    <ul id="menu">
                        <li><a href="./">Home</a></li>
                        <li><a href="About">About</a></li>
                        <li><a href="Contact">Contact</a></li>
                        <li><a href="Test">Test</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>

如何解决这个问题，以便Logo和菜单项显示在Header Wrapper内部（基本上位于红色框内），同样适用于页脚部分

Answer 1

你可以在CSS中使用

display: inline-block;

而不是

float: left;

完整示例：

.float-left { display: inline-block; }

这是因为样式float使父元素“隐藏”。样式display: inline-block的行为与float类似，但“可见”。

Answer 2

当你必须在其他div中的元素内部和两个div之后浮动，你需要添加清除。

分叉示例

http://codepen.io/anon/pen/mymMMz

<header>
        <div class="header-wrapper">
            <div class="float-left">
                <p class="site-title"><a href="./"> logo here</a></p>
            </div>
            <div class="float-right">
                <nav>
                    <ul id="menu">
                        <li><a href="./">Home</a></li>
                        <li><a href="About">About</a></li>
                        <li><a href="Contact">Contact</a></li>
                        <li><a href="Test">Test</a></li>
                    </ul>
                </nav>
            </div>
           <div class="clear"></div>
        </div>
    </header>


.clear {
    clear: both;
}

或将overflow hidden添加到.header-wrapper

HTML元素使用div＆＃39; s出现在包装器元素外部

2 个答案: