1

当涉及到 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>

我遇到的问题是......当我为每个网格分配边框时，每个边框都会进入下一个网格，从而导致对齐问题。

我遇到问题的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

任何帮助是极大的赞赏

4

1 回答 1

1

在查看网站后（按照您问题的实时链接），问题似乎不是源自网格系统，而是源自不正确的标记 - 您将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>

从层次结构中删除ul位于下div.container_12的，或者将嵌套div的s更改为lis，问题将得到解决。

于 2012-05-23T09:16:00.660 回答