सरलीकृत हैडर - स्थान

Question

के साथ परेशानी मैं जेसन हूँ और/जे एस कुछ सामने के अंत ज्ञान

मैं चले गए हैं फ़ौजों की चौकी के (बूटस्ट्रैप के साथ) कुछ HTML/CSS की मूल बातें में पाने के लिए कोशिश कर रहा हूँ कुछ ट्यूटोरियल्स के माध्यम से: कुछ अच्छा, कुछ बुरा - और मैं अपने आप से साइट पर जाने की कोशिश कर रहा हूं क्योंकि मुझे लगता है कि इससे मुझे सबसे तेज़ी से सीखने में मदद मिलेगी। अभी, मेरे पास एक लोगो है कि मैं स्क्रीन के शीर्ष/मध्य-बाएं को ठीक करने की कोशिश कर रहा हूं, और दाईं ओर उसी पंक्ति पर उस लोगो के दाईं ओर एक मूल इनलाइन मेनू। कुछ कारणों से, मेनू लोगो के साथ लाइन पर रहकर सहयोग नहीं करेगा। मेनू क्षैतिज चलाने की बजाय ढेर करता है। क्या मुझे एक ही कंटेनर में टी लोगो शामिल करने की ज़रूरत है, या क्या सड़क पर हेरफेर करने के लिए ऐसा करने का एक बेहतर तरीका है?

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

सीएसएस:

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

} 

मुझे यकीन है कि पुल सही की जरूरत नहीं है, लेकिन मैं वहाँ में छोड़ दिया देखने के लिए जहां मैं गलत रास्ते पर हूँ। बहुत धन्यवाद।

Answer 1

इस प्रयास करें:

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

} 

इस तरह, पूरे एनएवी तय किया जाएगा और न सिर्फ लोगो, याद रखें कि तय तैनात तत्वों theyr संबंधित कंटेनर से निकाला गया हो और इसके बजाय व्यूपोर्ट से संबंधित मिलता है।

Answer 2

पूरे नेविगेशन बार ही नहीं, लोगो को ठीक करें इस JSFiddle

पर एक नज़र डालें!

सीएसएस:

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; 

}