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標誌，鏈接，配置文件對齊問題

回答

相關問題