CSS标志，链接，配置文件对齐问题

我想编写一个基本的HTML导航标题的乐趣和教自己一些CSS/HTML，但我不能让我的东西安排在我的意图。CSS标志，链接，配置文件对齐问题

我想有最左边，一些链接在中间和右侧的用户图标页面的标志，这里是一个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>

感谢阅读长度和任何帮助表示赞赏:)

编辑：这么多伟大的回复，谢谢所有！对不起，反馈较晚，纽约时间分心:(

只是为了澄清，我不希望把徽标，链接和配置文件之间的物理可视线我只使用这些图像作为示范我想每一个元素容器我期待对齐链接文本和个人资料图片如下：

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

档案IMG：垂直中间，水平右

来源

2016-12-31 Ben

你更愿意使用像引导一个框架？ – Abk

Ben说：“为了好玩并教会自己一些CSS/HTML”，我不认为他更喜欢bootstrap。 –

你不需要'html'元素上的'min-width'或'max-width'。 'margin：auto'也不会对'html'元素做任何事情。 –

既然你在为乐趣而做，我认为这是最简单的，因为它得到:)
我没有做完整的布局调整，但这是我想你想要的。
只需让3 inline blocks给他们text-align:left , center and right和width 33% approx (including Borders and stuffs)，所以他们采取nett 33％每块。

更新垂直对齐。

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

 
\t \t \t background-color: pink; 
 
\t \t } 
 

 
\t \t .left{ 
 
\t \t \t text-align: left; 
 
\t \t } 
 

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

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

来源

2016-12-31 06:40:02

这对于以更简单的设计并排显示元素非常方便。是否可以（使用简单的代码风格）垂直和水平地对齐中间的链接？我尝试添加填充或垂直对齐，但这会将中间元素放入较大的框中，或者完全打破框。我正在寻找使链接/配置文件图标与徽标中间一致。 – Ben

是的，它很简单。当你需要在容器中垂直对齐'文本'时，只需使'容器的行高=容器的高度'，对于'水平'，你需要'text-align：center'，我已经演示过:) –

@ Ben如果您还需要'徽标和用户图标'在容器中水平居中，否则请进行另一次更新。但有问题，你说你想让他们离得很远，所以我离开它:) –

请试试这个：

<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; 
    }

给予必要的空白和边距。

来源

2016-12-31 06:42:28

试试这个 -

让像在顶部导航的同一线上3周的div结构的容器。您有2个选项来对齐 - （一）使用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

来源

2016-12-31 06:55:54

在你的超级接近我通常处理的方式。如果您将整个导航栏放在div标签中，或者更好地使用导航标签并给它一个适当的类名称，则可以更轻松地进行设计。

<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李：nth-last-child（1）

也关于那里的图像，检查字体真棒，他们有很多简单易用的图标，您可以使用他们的cdn，或者获取整个css文件。玩它可能会很有趣。

来源

2016-12-31 07:12:57

检查出来，类似于你想要的。它基于您提供的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>

来源

2016-12-31 07:15:04 Abk

<!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>

来源

2016-12-31 08:39:35 amaiafilo

CSS标志，链接，配置文件对齐问题

回答

相关问题