tiêu đề đơn giản cho một trang web tối thiểu - rắc rối với vị trí

Question

tôi là Jason và đang cố gắng để có được vào những điều cơ bản của một số HTML/CSS (với bootstrap)/JS để đạp một số kiến ​​thức front-end

Tôi đã đi thông qua một số hướng dẫn: một số tốt, một số xấu - và đang cố gắng để đi qua một trang web của riêng tôi kể từ khi tôi nghĩ rằng sẽ giúp tôi tìm hiểu nhanh nhất. Ngay bây giờ, tôi có một biểu tượng mà tôi đang cố gắng sửa ở đầu/giữa bên trái của màn hình và một trình đơn nội tuyến cơ bản ở bên phải của biểu tượng đó trên cùng một dòng ở bên phải. Tuy nhiên, vì lý do nào đó, menu sẽ không hợp tác bằng cách giữ nguyên logo. Menu cũng ngăn xếp thay vì chạy ngang. Tôi có cần phải đưa logo của anh ấy vào cùng một nơi chứa hay là có cách nào tốt hơn để thao tác trên đường không?

<div class="nav"> 
     <div class="logo"> 
    <img src="logo.gif"> 
    </div> 

    <div class="container"> 
    <ul class = "pull-right"> 
     <li><a href="#">Portfolio</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Blog</a></li> 
     <li><a href="#">Resume</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
    </div> 

CSS:

.nav li{ 
display: inline; 
} 
.logo{ 
    position: fixed; 
    top: 10px; 
left: 50px; 
} 
.nav a { 
    color: #fff; 
    font-size: 16px; 
    font-weight: bold; 
    padding: 14px 10px; 
    text-transform: uppercase; 

} 

Tôi chắc chắn kéo đúng là không cần thiết, nhưng tôi rời nó trong đó để xem tôi đang ở đâu trên đường đua không chính xác. Cảm ơn nhiều.

Answer 1

Hãy thử điều này:

.nav { 
    position: fixed; 
    top: 10px; 
} 
.nav li{ 
    display: inline-block; 
} 
.logo{ 
    position: relative; 
    left: 50px; 
} 
.nav a { 
    color: #fff; 
    font-size: 16px; 
    font-weight: bold; 
    padding: 14px 10px; 
    text-transform: uppercase; 

} 

Bằng cách đó, toàn bộ nav sẽ được cố định và không chỉ là biểu tượng, hãy nhớ rằng các yếu tố vị trí cố định được tách chiết từ container tương ứng theyr và nhận được liên quan đến khung nhìn để thay thế.

Answer 2

Hãy xem điều này JSFiddle

Sửa toàn bộ thanh điều hướng, không chỉ logo!

CSS:

body{ 
    background-color:black; 
} 
.nav { 
    position: fixed; 
    top: 10px; 
} 
.nav li, .container, .logo{ 
    display: inline-block; 
} 
.logo{ 
    position: relative; 
    left: 50px; 
    margin-right:10px; 
    vertical-align:middle; 
} 
.nav a { 
    color: #fff; 
    font-size: 16px; 
    font-weight: bold; 
    padding: 14px 10px; 
    text-transform: uppercase; 

}