2015-09-05 82 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