如何解決我的導航欄

-1

我似乎無法讓我的社交媒體圖標正確適合導航欄。我在每件事物周圍都有邊框，所以很容易看到裏面的東西。我不明白爲什麼社交媒體圖標在導航欄下方。我想讓圖標進入導航欄，並讓所有圖標左移< div id =「nav-left」>。任何幫助深表感謝。如何解決我的導航欄

Imgur問題：http://imgur.com/UKojBYx

我的HTML代碼：

<!DOCTYPE html> 
<html> 
    <head> 
     <link href='http://fonts.googleapis.com/css?family=Crimson+Text' rel='stylesheet' type='text/css'> 
     <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet"> 
     <link rel="stylesheet" href="Website(CSS).css" type="text/css" media="screen" title="no title" charset="utf-8"> 
     <title>Website</title> 
    </head> 
    <body> 
     <div class="nav"> 
      <div class="container" id="nav-left"> 
       <ul class="nav-left"> 
        <li id="twitter"><a href="http://twitter.com/#"><img src="Twitter.png" width="40" height="40" alt="Twitter" /></a></li> 
        <li id="instagram"><a href="http://instagram.com/#"><img src="Instagram.png" width="40" height="40" alt="Instagram"/></a></li> 
        <li id="quora"><a href="http://quora.com/#"><img src="Quora.jpg" width="80" height="35" alt="Quora" /></a></li> 
       </ul> 
      </div> 
      <div class="container" id="nav-right"> 
       <ul class="nav-right"> 
        <li id="future-plans"><a href="insert link">Future Plans</a></li> 
        <li id="contact"><a href="inset link">Contact</a></li> 
       </ul> 
      </div> 
     </div>

我的CSS代碼：

/* Get the whole box of social image links to be closer to the left border. 
Get the .nav-right to have better font, bigger font, and to pushed a little more to the left of the nav box. */ 

body { 
    border: 2px solid green; 
} 

/* Navigation Bar */ 
.nav { 
    height: 7%; 
    width: 98%; 
    top: 0; 
    z-index: 10; 
    position: fixed; 
    background-color: white; 
    border: 2px solid blue; 
} 

.nav ul { 
    display: inline-block; 
} 



/* Left Side Navigation Container */ 
#nav-left { 
    height: 100%; 
    top: 0; 
    left: 0; 
    float: left; 
    border: 2px solid red; 
} 

.nav-left li { 
    display: inline-block; 
    border: 2px solid black; 
    padding: 5px; 
} 



/* Right Side Navigation Container */ 
#nav-right { 
    height: 100%; 
    top: 0; 
    right: 0; 
    float: right; 
    border: 2px solid red; 
} 

.nav-right li { 
    display: inline-block; 
    border: 2px solid black; 
    margin: auto; 
    padding: 6px; 
}

來源

2014-09-01 Hunter

看起來ul上有一些額外的填充（默認情況下）用於導航鏈接。您需要手動清空您的導航器（充滿社交媒體圖標）的所有填充/邊距，以便很好地坐在另一個框中。

您可以專門爲您的導航（不影響其他任何內容）添加下面兩行

.nav ul { 
    display: inline-block; 
    padding: 0px; // make sure there's no padding 
    margin: 0px; // and no margin 
}

來源

2014-09-01 05:47:46

使用

*{ 
padding:0; 
margin:0; 
}

它將刪除所有塊元素的所有額外填充和餘量。

希望這能解決您的問題。

來源

2014-09-01 05:44:54

將顯示屬性更改爲內聯.nav ul類並將float：left設置爲.nav-left li類。

http://jsfiddle.net/3zc9mtnx/

body { 
border: 2px solid green; 
} 

/* Navigation Bar */ 
.nav { 
height: 7%; 
width: 98%; 
top: 0; 
z-index: 10; 
position: fixed; 
background-color: white; 
border: 2px solid blue; 
} 

.nav ul { 
display: inline; 
} 



/* Left Side Navigation Container */ 
#nav-left { 
    height: 100%; 
    top: 0; 
    left: 0; 
    float: left; 
    border: 2px solid red; 
} 

.nav-left li { 
    display: inline-block; 
    border: 2px solid black; 
    padding: 5px; 
    float:left; 
} 



/* Right Side Navigation Container */ 
#nav-right { 
    height: 100%; 
    top: 0; 
    right: 0; 
    float: right; 
    border: 2px solid red; 
} 

.nav-right li { 
    display: inline-block; 
    border: 2px solid black; 
    margin: auto; 
    padding: 6px; 
}

來源

2014-09-01 05:55:57

只要給基金淨值左，導航，右

height:auto;display:block

風格

來源

2014-09-01 06:11:13

如何解決我的導航欄

回答

相關問題