css - 在 HTML5 中为 div 部分中的元素施加适当宽度的困难

Question

我在为某个 div 设置正确宽度时遇到问题。我的代码如下：

    <nav>
        <ul>
            <div class="flt-sec">
                <a href="index.html" class='left'>home</a>
                <section>
                          <p> Our offers are the best on the city !! Check out our amazing activities !!! </p>
                </section>
            </div>
            <div class="flt-sec">
                <a href="_web/playa.html" >La Playa !</a>
                <section class='inv'>
                                 <p> One of the best in the world, if not the best, garanty !!! </p>
                </section>
            </div>
            <div class="flt-sec">
                <a href="_web/ciudad.html" >La Ciudad !</a>
                <section>
                               <p> Feel what your granpa felt in his youth, back to the fifties baby !! </p>
                </section>
            </div>
            <div class="flt-sec">
                <a href="_web/excursion.html" >La Excursion !</a>
                <section class='inv'>
                            <p> I thought pirate of the carabbean was all a hollywood set up. No ! We got it all wrong !! </p>
                </section>
            </div>
   </ul>
 </nav>

CSS如下：

.flt-sec
{
    width:25%;
    float:left;
}
nav
{
    width:100%;
}
nav a:link
{
    width:100%;
}
    section 
{
    width:100%;
}

但即便如此，我nav:a还是在容器末尾得到一个标签溢出div，如下所示：

其他div部分似乎没问题，并且表现得像他们应该的那样（nav:a和子部分都尊重 div 容器宽度）

Answer 1

每个导航链接的宽度为 25%，但您似乎也设置了填充。此填充将导致这些链接超过 100% 的组合宽度