我的導航混亂了，右邊框不能正常工作

我試圖讓每個部分之間有正確的邊界，並且每個單詞都是一個單獨的跨度，但它只是不想工作。我會喜歡一些幫助。所有4個邊界都走到一邊，甚至不足以佔據整個導航。請告訴我發生了什麼事。我會在圖片中發佈，但我的代表不夠高。它基本上是一個具有4個不同鏈接的導航欄，我希望它們之間有小的邊界，但是當我將所有列表項都放在一起時，邊框會變小，並聚集到導航的右側。像跨度甚至不在列表項目上。我的導航混亂了，右邊框不能正常工作

這裏是我的導航HTML：

<nav id="navigation"> 
    <ul> 
     <span class="navSpace"><li>Home</li></span> 
     <span class="navSpace"><li>Services</li></span> 
     <span class="navSpace"><li>Info</li></span> 
     <span class="navSpace"><li>FAQ's</li></span> 
    </ul> 
</nav>

而對於我的資產淨值的CSS：

#navigation{ 
width: 100%; 
height: 50px; 
padding-bottom: 0px; 
} 
#navigation li{ 
list-style: none; 
text-align: left; 
display: inline; 
float: left; 
padding: 5px; 
margin-right: 25px; 
font-size: 20px; 
} 
.navSpace{ 
text-decoration: none; 
color: black; 
text-shadow: 2px 2px 5px white; 
border-right: 2px solid black; 

}

對不起，事先沒有圖片和三江源。

來源

2013-06-23 user2489995

嘗試移動這一行：

border-right: 2px solid black;

到您的#navigation li部分。

編輯：作爲一些其他答案說明，你應該簡化這一點，並刪除<span>元素，爲了清晰和簡單起見。從你的HTML裏

來源

2013-06-23 18:49:30 ElGavilan

刪除跨度和使用CSS

#navigation li{ 
    list-style: none; 
    text-align: left; 
    float: left; 
    padding: 0px 5px; 
    margin-right: 25px; 
    font-size: 20px; 
    border-right: 2px solid black; 
    text-shadow: 2px 2px 5px white; 
    }

，如果你想要更小的邊框，然後邊框的本作的圖像，並在你的CSS使用它作爲背景圖片

#navigation li{ 
     list-style: none; 
     text-align: left; 
     float: left; 
     padding: 0px 5px; 
     margin-right: 25px; 
     font-size: 20px; 
     background-image:url (your image path here); 

     }

來源

2013-06-23 18:56:57

我爲你的問題創建了一個新的jsfiddle。你可以這樣做沒有那些span標籤

HTML

<nav> 
     <ul> 
      <li><a href="">link</a></li> 
      <li><a href="">link</a></li> 
      <li><a href="">link</a></li> 
      <li><a href="">link</a></li> 
      <li><a href="">link</a></li> 
     </ul> 
    </nav>

CSS

nav ul { 
    list-style: none; 
} 
nav ul li { 
    display: inline; 
    padding-left: 20px; 
} 
nav li a { 
    display: inline-block; 
    text-decoration: none; 
} 
nav li:not(:last-child):after { 
    content: " |"; 
    padding-left: 20px; 
}

會做你想要什麼

入住此的jsfiddle - >http://jsfiddle.net/Sds3h/1/

來源

2013-06-23 19:00:21

我的導航混亂了，右邊框不能正常工作

回答

相關問題