Question

我目前正在对我的网站进行一些重新设计，并且在标题div元素和一些float:属性的子元素方面遇到了一些小问题。

我的标题显示高度值为0，而不是正确计算内容本身。我已经做了一些阅读，我明白这很可能是导航中的浮动元素（在这种情况下是.desktoplinkitem）。

我的标题代码如下：

<div class="header videohead">
 <div class="mobile-nav">
  <div class="mobile-link-container">
   <div class="mobile-links">

   <li class="linkitem"><a href="homepage">Video</a></li>
   <li class="linkitem"><a href="stills">Stills</a></li>
   <li class="linkitem"><a href="about">About</a></li>
   <li class="linkitem"><a href="emaillink">Contact</a></li>                            </div>
   </div>
  </div>
  <div class="name logo">Name<br>Title</div>
  <div class="right-nav">
   <button class="mobilemenu mobilemenu--htx">
   <span></span>
   </button>
   <div class="desktop-nav">
   <ul>

   <li class="desktoplinkitem"><a href="email-link">Contact</a></li>
   <li class="desktoplinkitem"><a href="about.php">About</a></li>
   <li class="desktoplinkitem"><a href="link">Stills</a></li>
   <li class="desktoplinkitem"><a href="home">Video</a></li>                </ul>
  </div>
 </div>
</div>

CSS的样式如下：

.header {
    width: 100%;
    position: absolute;
    top: 0;
    z-index: 600;
    flex: none;
}

.videohead {
    display: inline-block;
}

.desktoplinkitem {
    visibility: inherit;
    color: inherit;
    background: none !important;
}

.linkitem {
    visibility: inherit;
    color: #FFFFFF;
    transform: scale(2, 2) translateX(-100px);
    opacity: 0;
}

.right-nav {
    position: absolute;
    right: 0%;
    padding: 35px;
    color: #000000;
    text-decoration: none;
}

.right-nav ul {
    height: auto;
    padding: 8px 0px;
    margin: 0px;
    float: right;
}

.right-nav li { 
    display: inline; 
    padding-top: 1em;
    padding-bottom: 1em;
    padding-left: 1em;
    letter-spacing: 1px;
    float: right;
}

我尝试添加clear fix hack但没有结果（使用以下内容）：

.videohead:after { 
   content: " ";
   display: table; 
   height: 0; 
   clear: both;
   *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML += '<div class="ie7-clear"></div>' );
}

可以看到页面here

还有另一种方法可以解决这个问题吗？

Answer 1

通过从position: absolute;移除.logo来解决此问题。

您的标题保持为空，因为其中的每个子项都以不同的方式定位为静态或相对。

如果他们是.header

的直接孩子，那么浮动就可能成为问题

标题div高度不计算，'清除修复'不工作？

1 个答案: