我在 960 网格方面遇到了麻烦。下面的代码描述了我想要使用的布局,即 6 个容器均匀分布。
<div class="container_12" style="background:blue";>
<div class="grid_2 alpha" style="background:red";>
Alpha
</div>
<div class="grid_2" style="background:orange";>
1
</div>
<div class="grid_2 " style="background:yellow";>
2
</div>
<div class="grid_2" style="background:green";>
3
</div>
<div class="grid_2" style="background:teal";>
4
</div>
<div class="grid_2 omega" style="background:red";>
omega
</div>
</div>
我遇到的问题是...当我为每个网格分配边框时,每个边框都会侵 eclipse 下一个网格,从而导致对齐问题。
我遇到问题的 html 代码是:
<div class="container_12 ">
<ul class="a-tab">
<li>
<a href="" class="grid_2 alpha">Today</a>
</li>
<li>
<a href="" class="grid_2">Restaurants</a>
</li>
<li>
<a href="" class="grid_2">Shops</a>
</li>
<li>
<a href="" class="grid_2">Accomodation</a>
</li>
<li>
<a href="" class="grid_2">Property</a>
</li>
<li>
<a href="" class="grid_2 omega">Nightlife</a>
</li>
</ul>
我使用的边框控制的 css 是:
.a-tab li{
list-style-type: none;
display: inline-block;
float: center;
border-color: #000;
border-top:solid;
border-right: solid;
border-left: solid;
-webkit-border-top-left-radius: 7px;
-webkit-border-top-right-radius: 7px;
-moz-border-radius-topleft: 7px;
-moz-border-radius-topright: 7px;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
font-size: 16px;
margin:0 0 0 0;
}
这显示在 http://www.virtualharrogate.co.uk
非常感谢任何帮助
最佳答案
查看网站后(点击您问题上的实时链接),问题似乎并非源自网格系统,而是源自不正确的标记 - 您正在嵌套 div
元素在无序列表 (ul
) 中。这是从网站上复制的相关片段:
<div class="container_12 ">
<ul>
<div class="grid_2 alpha">
<div class="tabframe" id="tabdetail">
<li>
<a href="">Today</a>
</li>
</div>
</div>
<!-- etcetera -->
</ul>
</div>
要么从层次结构中删除位于 div.container_12
下的 ul
,要么将嵌套的 div
更改为 li
s,问题就解决了。
关于html - 960 网格对齐问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10699772/