Question

首先，我试图制作一个横向的导航栏，并保持固定在顶部。

我正在尝试这样做，所以我左边有三个导航链接然后我想要我的全名，其下的摄影更小。但我希望整个事情，我的名字和摄影作为一个链接，将他们带到整个页面，然后右边的其他三个导航链接。

我遇到的问题，我知道这可能是愚蠢的，每当我尝试将摄影放在我的名下时，它也会导致最后三个导航链接，我也无法让它全部保持居中整个页面。

    <head>
        <title>my name|Photography</title>
        <link href="main.css" rel="stylesheet">
    </head>

    <body>

           <header>

               <nav>

                   <ul>

                       <li><a href="#">home</a></li>
                       <li><a href="#">about</a></li>
                       <li><a href="#">portfolio</a></li>

                   </ul>

                   <h1>My Full Name</h1>

                   <h3>Photography</h3>

                   <ul>

                       <li><a href="#">instagram</a></li>

                       <li><a href="#">contact</a></li>

                       <li><a href="#">book</a></li>

                   </ul>

               </nav>

           </header> 

    </body>

</html>

的CSS：

html{
background: url(images/7518828608_IMG_4655.JPG) no-repeat center center fixed;
size:cover;
-o-background-size: cover;
-webkit-background-size:cover;
-moz-background-size:cover;
}
header{
background:;
color: white;
margin:0;
padding: 0;
}

header h1{
    margin:0;
    display: inline;
    padding: 5px 5px 5px 10px;
    font-family: cursive;
}

header h3{
    display:inline;
    margin:0;
    padding:5px 10px 5px 5px;
    font-family: cursive;
}

nav ul{
    margin:0;
    display:inline;
}

nav ul li{
    display: inline-block;
    list-style-type: none;
    margin:0;
    padding: 5px 15px;
    font-family: inherit
}

nav ul li a{
    text-decoration: none;
    color:white;
}

nav ul li a:hover {
    color:black;
}

Answer 1

将整个标题内容带到中心：在标题中添加text-align，例如{text-align：center;}

Answer 2

如果您知道full name和my photography需要多少宽度，那么我会将h1和h2都包装在一个标记中，并将其设置为样式：

<a href="#test" style="max-width: 150px; display: inline-
block;">
    <h1>My Full Name</h1>
    <h3>Photography</h3>
</a>

并显示样式h1和h3：block;

Answer 3

我可能会建议通过删除冗余组件使其更加动态和简化。 Nav可以将链接列为元素的一部分，如：

<header>
    <nav>
        <a href="#">home</a>
        <a href="#">about</a>
        <a href="#">portfolio</a>
        <a href="#">
            <h1>My Full Name</h1>
            <h3>Photography</h3>
        </a>
        <a href="#">instagram</a>
        <a href="#">contact</a>
        <a href="#">book</a>            
    </nav>
</header>

这包括您的姓名和摄影，并且在一个链接中。 CSS可以使用flex并对齐其内容，并根据屏幕分辨率使其更具动态性。

html {
    background: url(images/7518828608_IMG_4655.JPG) no-repeat center center fixed;
    size:cover;
    -o-background-size: cover;
    -webkit-background-size:cover;
    -moz-background-size:cover;
}

header {
    color: white;
    font-family: cursive;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav a{
    text-decoration: none;
    color:white;
    display: inline-block;
}

h1, h3 {
    text-align: center;
}

nav a:hover {
    color:black;
}

Answer 4

我认为这有助于您解决问题...我已附上代码段...

＆＃13;

html {
    background: url(images/7518828608_IMG_4655.JPG) no-repeat center center fixed;
    size:cover;
    -o-background-size: cover;
    -webkit-background-size:cover;
    -moz-background-size:cover;
}

header {
    color: white;
    font-family: cursive;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav a{
    text-decoration: none;
    color:black;
    display: inline-block;
}

h1, h3 {
    text-align: center;
}

nav a:hover {
    color:red;
}

＆＃13;

<header>
    <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Portfolio</a>
        <a href="#">
            <h2>My Full Name</h2>
            <h3>Photography</h3>
        </a>
        <a href="#">Instagram</a>
        <a href="#">Contact</a>
        <a href="#">Book</a>            
    </nav>
</header>

＆＃13;

需要帮助集中导航栏

4 个答案: