Question

目前，我有一个包含div的导航栏，以及div内部的文本。不幸的是，当浏览器调整大小时，它会导致文本移位，最终它们都会相互扭曲。看看小提琴：

HTML

<nav id= 'headWrap' class="wrapFix">  <div id= "nameCont"> Tupac Shakur
</div>

<div class="link" id="postOne"> Yo! </div>

<div class="link" id="postTwo"> About </div> 


<div class="link" id="postThree"> GitHub </div> 
<div class="link" id= "postFour"> Contact  </div> 






</nav>

CSS

nav {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: red;
    display: inline-block;
}

#nameCont {
    position:relative;
    margin-left: 3%;
    margin-right: 3%;
    display: inline-block;
}
.link {
    display: inline-block;
    margin-right:5%;
}
#postOne {
    position: absolute;
    right:40%;
    top:0;
}
#postTwo {
    position: absolute;
    right:20%;
    top:0;
}
#postThree {
    position: absolute;
    right:10%;
    top:0;
}
#postFour {
    position: absolute;
    right:0;
    top:0;
}

Answer 1

position:absolute会这样做。只需给.wrapFix内的元素一个百分比宽度来定位它们。

这是更新后的css https://jsfiddle.net/6jvxLr4k/7/

当浏览器调整大小时，div内的文本会相互重叠

1 个答案: