Question

我的标题上的Div是重叠的，除非我设置了一个特定的宽度，我无法做到。我现在尝试了几种不同的清除花车的方法，没有运气。

这是我的jsfiddle https://jsfiddle.net/q0oc27t8/

这是我的导航代码：

.nav {
    border-bottom: 3px solid #496278;
    border: 1px dotted red;
    bottom: 3px;
    font-size: 1.1vw;
    font-weight: bold;
    padding: 0 0.8vw 0 0.8vw;
    text-align: center;
}

最好的解决方法是什么？

Answer 1

漂浮不是你的问题，所有文字都是绝对定位的。这意味着这些元素将从文档流中拉出，不再正确地换行/堆叠。

而不是使用position: absolute尝试使用一点padding和margin来定位每个.header-element。

Answer 2

不是你的漂浮物。您的.inner元素绝对定位。因此，它们被从流程中取出，.header-elements除了填充之外没有任何大小。

看起来你正试图垂直和水平地居中这些元素。您可以改为使用table和table-cell显示属性。

相关代码：

.header-element {
    height: 100%;
    float: left;
    display:table;
    position:relative;
}

.header-element .inner {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

以下完整代码：

＆＃13;

    body {
        background: gray;
    }
    /* ------ */
    /* Header */
    /* ------ */
    #header {
        width: 100%;
        height: 4vw;
        background: white;
        font-family: "fira-sans-2";
        /* Shadow */
        -webkit-box-shadow: 0px 7px 13px -4px rgba(110,110,110,1);
        -moz-box-shadow: 0px 7px 13px -4px rgba(110,110,110,1);
        box-shadow: 0px 7px 13px -4px rgba(110,110,110,1);
    }
    
    .header-element {
        height: 100%;
        float: left;
        display:table;
        position:relative;
    }

    .header-element .inner {
        display:table-cell;
        vertical-align:middle;
        text-align:center;
    }
    
    /* Logo */
    .logo {
        width: 3vw;
        font-weight: bold;
        margin-right: 1vw;
    }
    
    .nav {
        border-bottom: 3px solid #496278;
        border: 1px dotted red;
        bottom: 3px;
        font-size: 1.1vw;
        font-weight: bold;
        padding: 0 0.8vw 0 0.8vw;
        text-align: center;
    }
    
    .nav .inner {
        margin-top: 3px;
    }
    
    /* No select */
    .noselect {
    cursor: default;
    -webkit-touch-callout: none;
      -webkit-user-select: none;
       -khtml-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
    }

＆＃13;

<!-- Body -->
<body>
    <div id="header" class="noselect">
        <div class="header-element logo">
            <span class="inner">T</span>
        </div>
        <div class="header-element nav">
            <span class="inner">Map</span>
        </div>
        <div class="header-element nav">
            <span class="inner">Discover</span>
        </div>
        <div class="header-element nav">
            <span class="inner">Bucket</span>
        </div>
        <div class="header-element nav">
            <span class="inner">Plans</span>
        </div>
    </div>
</body>

＆＃13;

Answer 3

您使用的position: absolute存在问题，很容易重叠，在您的情况下您不需要它。

如果你改变这个，你将有一个良好的开端

.header-element .inner {
    display: inline-block;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%); 
}

代码段

＆＃13;

    body {
        background: gray;
    }
    /* ------ */
    /* Header */
    /* ------ */
    #header {
        width: 100%;
        height: 4vw;
        background: white;
        font-family: "fira-sans-2";
        /* Shadow */
        -webkit-box-shadow: 0px 7px 13px -4px rgba(110,110,110,1);
        -moz-box-shadow: 0px 7px 13px -4px rgba(110,110,110,1);
        box-shadow: 0px 7px 13px -4px rgba(110,110,110,1);
    }
    
    .header-element {
        height: 100%;
        float: left;
        position: relative;
    }

    .header-element .inner {
        display: inline-block;
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%); 
    }

    /* Logo */
    .logo {
        width: 3vw;
        font-weight: bold;
        margin-right: 1vw;
    }
    
    .nav {
        border-bottom: 3px solid #496278;
        border: 1px dotted red;
        bottom: 3px;
        font-size: 1.1vw;
        font-weight: bold;
        padding: 0 0.8vw 0 0.8vw;
        text-align: center;
    }
        
    /* No select */
    .noselect {
    cursor: default;
    -webkit-touch-callout: none;
      -webkit-user-select: none;
       -khtml-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
    }

＆＃13;

    <div id="header" class="noselect">
        <div class="header-element logo">
            <span class="inner">T</span>
        </div>
        <div class="header-element nav">
            <span class="inner">Map</span>
        </div>
        <div class="header-element nav">
            <span class="inner">Discover</span>
        </div>
        <div class="header-element nav">
            <span class="inner">Bucket</span>
        </div>
        <div class="header-element nav">
            <span class="inner">Plans</span>
        </div>
    </div>

＆＃13;

浮子没有清理

3 个答案: