Question

我刚刚回到Web开发中，所以我正在努力再次拉伸这些肌肉。我想要实现的是我的垂直菜单上的标题，背景中的缩写和全名在这些首字母的中间。我能够使用codepen中的代码执行此操作，但在调整窗口大小时很快就会破坏。我知道这部分是由于绝对的位置。是否有另一种方法可以实现这种效果，并使其具有可扩展性，但仍保持在导航线内？

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

<html>
<head>
    <title>Scottish Arts</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<div id="body">
<aside>

</aside>

<nav>
    <h1 id="navSA">SA<h1>
    <h1 id="sa">Socttish Arts</h1>
    <ul>
        <li><h3></h3></li>
        <li><a href=" ">Home</a></li>
        <li><a href=" ">Scottish Arts</a></li>
        <li><a href=" ">Bagpipes</a></li>
        <li><a href=" ">Contact Us</a></li>
    </ul>
</nav>


</div>


</body>
</html>

html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
    padding: 0;
}

h1,h2,h3 {
    padding: 0;
    margin: 0;
}

#body {
    display: flex;
    height: 100%;
}

aside {
    width: 25px;
    height: 100%;
    background: url("img/nhtar.gif");

    background-repeat: repeat;
    border-right: 2px #000 solid;

}

nav {
    height: 100%;
    width: 15%;
    background-color: #7E717A;
    border-right: 4px #A2969E solid;
  overflow: hidden;
}

nav #navSA {
    font-weight: bolder;
    text-align: center;
    padding: 0;
    margin: 0;
    font-size: 8em;
    color: #A2969E;
}

nav #sa {
    padding: 0;
    margin: 0;
    position: absolute;
    top: 60px;
    left: 40px;
    font-size: 2em;
    text-shadow: 2px 2px #7E717A;

}

nav ul {
    margin: 0;
    padding: 0;
}

nav ul li {
    list-style: none;
    text-align: right;
}

nav ul li a {
    display: block;
    padding: 5px;
    background-color: #A2969E;
    text-decoration: none;
    font-size: 1.5em;
    font-family: "Verdana";
    font-weight: bold;
    color: #fff;
    border-bottom: 4px #7E717A solid;
}

nav ul li a:hover {
    background-color: #372E34;
}

Answer 1

给没有亲戚父母的孩子提供绝对职位，将设定与职业相关的职位。在css中将position:relative;添加到nav，一切都会好的;）

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

文本覆盖文本和可扩展。

1 个答案: