2015-09-05 66 views
-3

我試圖做的 enter image description here 那裏是爲頂部信息鏈接,如新聞和這樣集裝箱的鏈接

我的問題是,第二個容器中的一個容器類似的東西:鏈接拒絕留在水平

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 

 
#header { 
 
    background-color:black; 
 
    color:white; 
 
    text-align:center; 
 
    padding:5px; 
 
} 
 
#tabLinks{ 
 
list-style-type: none; 
 
font-size: 14px; 
 
line-height: 18px; 
 
overflow-y:scroll; 
 
margin: 0 auto; 
 
position: relative; 
 
/*width: 890px;*/ 
 

 

 
} 
 

 

 
#tabLinks li ul { 
 
list-style-type: none; 
 
    /*margin: 010px 0 ;*/ 
 
    display: inline; 
 
    padding: 10px; 
 
} 
 

 

 

 
#footer { 
 
    background-color:black; 
 
    color:white; 
 
    clear:both; 
 
    text-align:center; 
 
    padding:5px; \t \t 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 

 
<div id="header"> 
 
<h1>City Gallery</h1> 
 
</div> 
 

 
<div id="tabLinks"> 
 
    <ul> 
 
    <div = class="a"> 
 
     <li><a href="index.html">Home</a</li>&nbsp;&nbsp;&nbsp; 
 
     <li><a href=Blog.html>Blog</a></li>&nbsp;&nbsp;&nbsp;&nbsp; 
 
     <li><a href=Terms.html>Terms</a></li>&nbsp;&nbsp;&nbsp; 
 
     <li><a href=Privacy.html>Privacy</a></li>&nbsp;&nbsp;&nbsp; 
 
    </div> 
 
    </ul> 
 
</div> 
 

 

+0

什麼是你特別有麻煩問題?顏色?鏈接是垂直堆疊而不是水平列出的? – xdhmoore

+0

鏈接拒絕他們留在容器**內聯** – Lamar

+0

你是說他們是垂直而不是水平的? – xdhmoore

回答

1

一個解決方案是在UL和李使用inline-block的...

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 

 
#header { 
 
    background-color: black; 
 
    color: white; 
 
    text-align:center; 
 
    padding:5px; 
 
} 
 
#tabLinks{ 
 
font-size: 14px; 
 
line-height: 18px; 
 
overflow-y:scroll; 
 
margin: 0 auto; 
 
position: relative; 
 
/*width: 890px;*/ 
 
} 
 

 
#tabLinks ul{ 
 
    display: inline-block; 
 
} 
 

 
#tabLinks li{ 
 
    display: inline-block; 
 
    padding: 10px; 
 
} 
 

 
#footer { 
 
    background-color:black; 
 
    color:white; 
 
    clear:both; 
 
    text-align:center; 
 
    padding:5px; \t \t 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 

 
<div id="header"> 
 
<h1>City Gallery</h1> 
 
</div> 
 

 
<div id="tabLinks"> 
 
    <ul> 
 
     <li><a href="index.html">Home</a</li> 
 
     <li><a href=Blog.html>Blog</a></li> 
 
     <li><a href=Terms.html>Terms</a></li> 
 
     <li><a href=Privacy.html>Privacy</a></li> 
 
    </div> 
 
    </ul> 
 
</div> 
 

 

+0

這對我來說看起來不錯......我認爲'#tabLinks li上的'display:inline' 'block也可以,但也許'display:inline-block'可以讓你更好地控制像padding這樣的東西... – xdhmoore

+0

如果我想創建這個容器就像twitter一樣 – Lamar

+0

哪個容器? – xdhmoore