CSS 徽标、链接、配置文件对齐问题

Question

我正在尝试编写一个基本的 HTML 导航 header 来娱乐并自学一些 CSS/HTML 但我无法按照我预期的方式安排事情。

我想在最左边有一个徽标，在中间有一些 link 到页面，在右边有一个用户图标，这是一个 moc 想法：这是一起屠宰代码的结果:(

我认为要让我的想法奏效，我需要在一个整体容器内创建 3 个元素位置。像这样，但我似乎无法找到一种有效的方法：

这是我当前的 CSS 代码：

html {
height:100%;
background-color: #f8f8ff;
min-width: 800px;
max-width: 1000px;
margin: auto;
}

body {
background-color: #FFF;
}

.topnav-logo{
float:left;
background-color: #f8f8ff;
margin: 0;
padding: 0;
}

.topnav-profile{
float:right;
background-color: #f8f8ff;
}

.topnav{
background-color: #f8f8ff;
margin: 0;
padding: 0;
width: auto;
}

ul.topnav {
list-style-type: none;
overflow: hidden;
}

/* Float the list items side by side */
ul.topnav li {
float: left;
line-height: 110px;
}

/* Style the links inside the list items */
ul.topnav li a {
display: inline-block;
color: RGB(120,200,250);
padding: 0px 10px;
text-decoration: none;
transition: 0.3s;
font-size: 30px;
}

目前与之配套的 HMTL 如下所示：

<html>
<head>
    <link rel="stylesheet" href="stylesheet.css" type="text/css"/>
    <title> </title>
</head>
<body>
<a class="topnav-logo" href="index.html"><img src="images/logo.jpg" alt="site-logo"></a>
<ul class="topnav" id="Topnav">
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <a class="topnav-profile" href="index.html"><img src="images/profile.png" alt="user profile"></a>
</ul>
body content
</body>

感谢您的阅读，如有任何帮助我们将不胜感激:)

编辑：这么多很棒的回复，谢谢大家！很抱歉迟到 feed-back，新年打扰了:(

为了澄清起见，我不想在徽标、links 和简介之间放置物理可见线。我只是使用这些图像来演示我想要每个元素容器的位置。我希望按如下方式对齐 link 文本和个人资料图片：

链接：垂直居中，水平居中

个人资料图片：垂直中间，水平右边。

Answer 1

既然你是为了好玩，我认为这是最简单的:)
我没有为完美的布局做所有的调整，但这是我认为你想要的。
简单地让 3 inline blocks 给他们 text-align:left , center and right 和 width 33% approx ( including Borders and stuffs) 这样他们每个块净赚 33%。

UPDATE 用于垂直对齐。

  div{
   display: inline-block;
   width:32%;
   height: 50px;
            line-height:50px;

   background-color: pink;
  }

  .left{
   text-align: left;
  }

  .middle{
   text-align: center;
  }
  .right{
   text-align: right;
  }

<div class="left">
 <span>Logo here on far left</span>
</div>
<div class="middle">
 <span>link1</span>
 <span>link2</span>
 <span>link3</span>
</div>
<div class="right">
 <span>User Icon on far right</span>
</div>

Answer 2

请试试这个：

    <html>
        <head>
            <link rel="stylesheet" href="stylesheet.css" type="text/css"/>
            <title> </title>
        </head>
        <body>
  <div class="header">
        <a class="topnav-logo" href="index.html"><img src="images/logo.jpg" alt="site-logo"></a>
        <ul class="topnav" id="Topnav">
            <li><a href="">Link</a></li>
            <li><a href="">Link</a></li>
            <li><a class="topnav-profile" href="index.html"><img src="images/profile.png" alt="user profile"></a></li>
        </ul>
</div>
        body content
        </body>
    </html>

这里是css:

    html {
    height:100%;
    background-color: #f8f8ff;
    min-width: 800px;
    max-width: 1000px;
    margin: auto;
    }

    body {
    background-color: #FFF;
    }
   .header{
     display:inline-block;
    }    
    .topnav-logo{

    background-color: #f8f8ff;
    margin: 0;
    padding: 0;
    }

    .topnav-profile{

    background-color: #f8f8ff;
    }

    .topnav{
    background-color: #f8f8ff;
    margin: 0;
    padding: 0;
    width: auto;
    }

    ul.topnav {
    list-style-type: none;
    overflow: hidden;
    }

    ul.topnav li a {
    color: RGB(120,200,250);
    padding: 0px 10px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 30px;
    }

提供必要的填充和边距。

Answer 3

试试这个 -

制作一个类似容器的结构，其中 3 个 div 在顶部导航的同一行中对齐。您有 2 个对齐选项 - (i) 使用 display:inline-block 或 (ii) float

<div class="container">

    <div class="nav-container">
    <div class="left">
    <a>
    <img width="100" height="100"     src="https://cdn2.iconfinder.com/data/icons/social-media-8/512/image3.png"     alt="site-logo"></a>
    </div>
    <div class="mid">

    <ul class="topnav" id="Topnav">
        <li><a href="">Link</a></li>
        <li><a href="">Link</a></li>
    </ul>
    </div>
    <div class="right">
    <a class="topnav-profile" href="index.html"><img width="100" height="100"     src="http://www.aspirehire.co.uk/aspirehire-co-uk/_img/profile.svg" alt="user     profile"></a>
    </div>
    </div>
</div>

CSS -

.container {
  position:relative;
  width:80%;
  margin:0 auto;
  border:1px solid #cccccc;
}
.nav-container {
  border:1px solid #cccccc;
  height:100px;
}
.left {
  float:left;
  border:1px solid #cccccc;
  width:20%;
  height:100%;
}
.mid {
  float:left;
  border:1px solid #cccccc;
  width:59%;
  height:100%;
}
.right {
  float:right;
  width:20%;
  height:100%;
  border:1px solid #cccccc;
}

See Fiddle

Answer 4

你的处理方式非常接近我通常的处理方式。如果您将整个导航栏放在 div 标签中，或者更好的是一个导航标签，并给它一个合适的 class 名称，那么您可以更轻松地设计它。

<html>
<head>
    <link rel="stylesheet" href="stylesheet.css" type="text/css"/>
    <title> </title>
</head>
<body>
<nav class="primaryNav">
 <a class="topnav-logo" href="index.html"><img src="images/logo.jpg" alt="site-logo"></a>
  <ul class="topnav" id="Topnav">
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
      <li><a class="topnav-profile" href="index.html"><img src="images/profile.png" alt="user profile"></a></li>
  </ul>
</nav>
body content
</body>

CSS

.primaryNav{
height: whatever;
width: whatever:
}
.primaryNav ul{
list-style:none;
width: whatever;
float: right
}
.primaryNav li{
display:inline-block;
margin:I usually give a margin here;
}
.primaryNav a{
padding:10px;
}

像这样。如果你只想控制那个你也可以使用 .primaryNav li:nth-last-child(1)

还有关于你那里的那张图片，查看 Font Awesome，他们有大量易于使用的图标，你可以使用他们的 cdn，或者获取整个 css 文件。玩起来一定很有趣。

Answer 5

看看这个，跟你想要的差不多。它基于您提供的 moc 创意图像。将其用作指南。

#main{
  width: 99%
  height: 700px;
  border: 1px solid grey;
  
 

}
#content{
  width: 90%;
  height: inherit;
  border-right: 1px solid grey;
  border-left: 1px solid grey;

  margin:  0 auto ;

}

#header{
  width: 100%;
  border-bottom: 1px solid grey;
  height: 80px;
}

.logo{
  width: 20%;
  height: inherit;
  float: left;
  border-right: 1px solid grey;
  
}
.logo img{
  max-width: 80px;
  max-height: 80px;
  padding: 5px;
}


.nav{
  width: 50%;
  float: left;
  margin-right: 5px;
  padding: 5px;
}
.icon{
  width: 20%;
  float: left;
  margin-left: 5px;
  padding: 5px;
}

.icon img{
  max-width: 60px;
  max-height: 60px;
  
}

.nav ul li{
  display: inline;
  text-decoration: none;
  padding: 5px;
  border: 1px dashed orangered;
  margin: 5px;
}

.text p{
  padding: 10px 10px 0;
}

<body>
  <div id="main">  
    <div id="content">
      <div id="header">
        <div class="logo">
          <img src="http://res.cloudinary.com/wisdomabioye/image/upload/v1462961781/about_vbxvdi.jpg" alt="Image" />
          </div>
        <div class="nav">
          <ul>
            <li> link 1 </li>
            <li> link 2 </li>
            <li> link 3 </li>
            
            
            </ul>
          </div>
        <div class="icon">
          <img src="http://res.cloudinary.com/wisdomabioye/image/upload/v1477218723/images_a0xbmx.png" alt="icon" />
          </div>
        
        </div>
        <div class="text">
          <p>
What is Stick Checking?

The act of using the hockey stick to knock the puck off of the puck carrier's stick or to clear it away from their vicinity. 
Sporting Charts explains Stick Checking

Stick checking is a defensive move where a player will stop the puck carrier's progression by knocking the puck off of their stick and out of their possession. It's often done when the defender isn't in a position to stop the attacker by using their body. Stick checking has been used in hockey since day one. There are several variations of the move, such as the poke, tap, sweep, and press check. Another common stick check is lifting the opponent's stick while they're in possession of the puck and then taking it away from them. A good stick check will result in the defending player gaining possession of the puck which will then allow them to start an offensive play. Stick checking can also be considered an offensive play when it's performed in the opponent's zone by a fore checker. A successful stick check in the offensive zone can often lead to a scoring chance. 
 </p>
          <p>
What is Stick Checking?

The act of using the hockey stick to knock the puck off of the puck carrier's stick or to clear it away from their vicinity. 
Sporting Charts explains Stick Checking

Stick checking is a defensive move where a player will stop ion of the puck and then taking it away from them. A good stick check will result in the defending player gaining possession of the puck which will then allow them to start an offensive play. Stick checking can also be considered an offensive play when it's performed in the opponent's zone by a fore checker. A successful stick check in the offensive zone can often lead to a scoring chance. 
 </p>
          </div>
      </div>
    
    </div>
  
  </body>

Answer 6

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title></title>
<style>
html {
  height:100%;
  background-color: gold;
  min-width: 800px;
  max-width: 1000px;
  margin: auto;}

body {
  background-color: #ddd;}

.topnav-logo{
  float:left;
  background-color: red;
  margin: 0;
  padding: 0;
  width:calc(10% - 2*1px);height:110px;
  border:1px solid}

.topnav-profile{
  float:right;
  background-color: pink;
  width:calc(10% - 2*1px);height:110px;
  border:1px solid}

.topnav{
  margin: 0;
  padding: 0;
  width: 80%;}

ul {
  list-style-type: none;
  overflow: hidden;}

/* Float the list items side by side */

.topnav li {
  float: left;border:1px solid;
  margin-right:.5em;
  line-height: 110px;
  width:calc(100% /3 - 1*.5em - 2*1px)}

/* Style the links inside the list items */

.topnav li a {
  color: RGB(120,200,250);
  text-decoration: none;
  transition: 0.3s;
  font-size: 30px;}

</style>
</head>   

<body>

<header>
<div class="topnav-profile">
  <a href="index.html"><img src="images/profile.png" alt="user profile"></a></div>
<div class="topnav-logo">
  <a href="index.html"><img src="images/logo.jpg" alt="site-logo"></a></div>
<nav>
  <ul class="topnav" id="Topnav">
   <li><a href="">Link</a></li>
   <li><a href="">Link</a></li>
   <li><a href="">Link</a></li>
  </ul>
</nav>
</header>
<div>2 logos: user profile must be first to float right . Each logo has width:calc(10% - 2*1px)*2, and the nav element:width:calc(100% / the number of links you want - 1*.5em -margin-- -2*1px --border--). <a href="http://codepen.io/amaiafilo/pen/ZLzOEE?editors=1100">See in codepen </a></div>
</body>

CSS 徽标、链接、配置文件对齐问题

CSS logo, links, profile alignment issue

html

css

navigationbar