无法证明内容在我的标题链接上工作

问题描述 投票：0回答：3

我希望名称徽标在左侧，链接在标题的中心，但由于某些原因我无法进行这些设置。

justify-content 只有在我将它添加到标题时才有效，但是我无法配置左侧的徽标和中间的链接。 我觉得我的课程有问题，请帮我解决一下

<body>

    <header>

        <div class="container">
        <img class="logo" src="logo.png">
        </div>

        <div class="links">   
            <nav>
                <ul>
                    <li><a href="#">Sobre mim</a></li>
                    <li><a href="#">Projetos</a></li>
                    <li><a href="#">Contato</a></li>
                </ul>
            </nav>
        </div>

    </header>

</body>

body{
    margin: 0;
}

header{
    display: flex;
    width: auto;
    height: 100px;
    align-items: center;
    background-color: black;
}



a:link{
    color: #d7b361;
    font-size: larger;
    padding: 50px 50px;
    list-style:none;
    text-decoration: none;

    
}

a:hover{
    color:white;

}

ul{
  margin: 0px ;
  display: flex;
  justify-content: center;
}


.logo{
    padding-left: 20px;
    width: 250px;
    height: auto;
    justify-content: left;
}

.container {
   
    display: flex;
    justify-content: left;
}

.links{
    justify-content: center;
}
html css error-handling styles text-justify
3个回答
1
投票

->避免标题固定高度

-> 在标题标签上应用填充以管理高度

-> 从锚标签中删除填充并应用显示内联块

-> 对于链接之间的间距，在 Li 标签上应用填充

请参考此链接进行现场演示以详细了解。 https://jsfiddle.net/yudizsolutions/s9y8cva2/

body {
  margin: 0;
}

header {
  display: flex;
  width: auto;
  align-items: center;
  background-color: black;
  padding: 29px 0px;
}

a:link {
  color: #d7b361;
  font-size: larger;
  list-style: none;
  text-decoration: none;
  display: inline-block;
}

a:hover {
  color: white;
}

ul {
  margin: 0px;
  display: flex;
  justify-content: center;
  padding: 0px;
}

ul li {
  padding: 10px 30px;
}

.logo {
  padding-left: 20px;
  width: 250px;
  height: auto;
  justify-content: left;
}

.container {
  display: flex;
  justify-content: left;
}

.links {
  justify-content: center;
}
<body>

  <header>

    <div class="container">
      <img class="logo" src="logo.png">
    </div>

    <div class="links">
      <nav>
        <ul>
          <li><a href="#">Sobre mim</a></li>
          <li><a href="#">Projetos</a></li>
          <li><a href="#">Contato</a></li>
        </ul>
      </nav>
    </div>

  </header>

</body>

0
投票

你应该把所有的导航项目放在 nav 标签里，你也在使用容器类作为标志，它会自动从你在项目中使用的 framewrok 中选择 

max-width: 1320px
容器 css。

我已经调整了你的代码，希望这对你有帮助。还可以使用 

margin-left: -px
nagtive 像素属性来调整链接居中，

如果您不想使用边距的负属性，那么您可以在

div
内添加一个项目或
nav
，然后根据您的需要使用
justify-content: space-between
或
justify-content: space-around
使导航中的一切居中

HTML

<header>

        

         
            <nav>
                <div class="logo_container">
                    <img class="logo" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSoZO3Uai5V044q40trUMuaZW8AwbudAqk3RQ&usqp=CAU">
                    </div>
                <div class="links">  
                <ul>
                    <li><a href="#">Sobre mim</a></li>
                    <li><a href="#">Projetos</a></li>
                    <li><a href="#">Contato</a></li>
                </ul>
            </div>
            </nav>
        

    </header>

CSS

body{
    margin: 0;
}

header{
    width: auto;
    background-color: black;
}


nav
{
    display: flex;
    align-items: center;
}



a:link{
    color: #d7b361;
    font-size: larger;
    padding: 50px 50px;
    list-style:none;
    text-decoration: none;

    
}

a:hover{
    color:white;

}

ul{
  margin: 0px ;
  display: flex;
  justify-content: center;
}

li
{
    list-style: none;
}

.logo{
    padding-left: 20px;
    width: 250px;
    height: auto;
}



.links{
    width: 100%;
    margin: 0 0 0 -100px;
    justify-content: center;
}
0
投票

由于links div container和logo div container是兄弟元素，其中一个必须跳出正常的渲染布局以避免推挤另一个。下面的解决方案将徽标 div 容器从正常渲染流程中移除，使链接 div 容器不受徽标影响，并且能够居中，就好像它是标题中的唯一元素一样。这是通过使徽标 div 容器绝对定位来实现的。

根据Mozilla 文档，绝对定位的元素从正常文档流中删除，并且在页面布局中不会为该元素创建空间。它相对于其最近定位的祖先定位...。文档继续说，它的最终位置由 top、right、bottom 和 left 的值决定。 因此，

left: 0%
用于将徽标向左移动。由于徽标 div 容器需要一个定位的祖先，因此 
<Header>
标签现在是一个定位标签——定位为 
relative
。见下文。

body{
    margin: 0;
}

header{
    display: flex;
    justify-content: center;
    position: relative;
    width: auto;
    height: 100px;
    align-items: center;
    background-color: black;
}

a:link{
    color: #d7b361;
    font-size: larger;
    padding: 50px 50px;
    list-style:none;
    text-decoration: none;
}

a:hover{
    color:white;

}

ul{
  margin: 0px;
  display: flex;
  justify-content: center;
}


.logo{
    padding-left: 20px;
    width: 250px;
    height: auto;
    justify-content: left;
}

.container {
    position: absolute;
    left: 0%;
}

/*
.links{
    justify-content: center;
}
*/
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.