Question

我正在尝试做类似的事情其中有一个容器用于顶部信息，第二个容器用于链接，例如NEWS 等

我的问题是：链接拒绝保持水平

<!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;	 	 
}
</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>

Answer 1

一种解决方案是在ul和li上使用内联块...

＆＃13;

<!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;	 	 
}
</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>

＆＃13;

链接容器

1 个答案: