1

www.amyyatsuk.com

我通过验证器运行代码，它不喜欢我在无序列表中合并 div 的方法。我正在尝试在下拉导航菜单上设置内部边框。

能达到同样效果的有效标记是什么？

HTML：

<div id="linksLeft">
    <ul class="menu">
        <li id="about"><a href="#">about</a></li>
        <li id="portfolio"><a href="editorial.html">portfolio</a>
        <ul class="subMenu" id="subNav"> **<div id="subnavborder">**
            <li><a href="editorial.html">editorial</a></li>
            <li><a href="advertising.html">advertising</a></li>
            <li><a href="packaging.html">packaging</a></li>
            <li><a href="photography.html">photography</a></li> **</div>**
        </ul>
        </li>
    </ul>
</div>

CSS：

#subnavborder {
    margin:10px;
    border: 6px solid white;
    border-radius:6px;
}
4

3 回答 3

1

我会使用:after伪选择器，如下所示：

小提琴

.subMenu:after {
    content: '';
    display: block;
    border: 6px solid white;
    border-radius:6px;
    position: relative;
    width: figure it out;
    height: figure it out;
    left: figure it out;
    top: figure it out;
}
于 2013-02-28T16:36:43.617 回答
1

两种选择

使用常规边框 常规小提琴。 和 使用内部边框内部小提琴

常规边框 您可以使用此类实现 UL 元素的边框样式

.subnavborder {
    margin:10px;
    border: 6px solid black;
    border-radius:6px;
}

除非出于其他原因，您不需要 div 标记如下

<div id="linksLeft">
    <ul class="menu">
        <li id="about"><a href="#">about</a></li>
        <li id="portfolio"><a href="editorial.html">portfolio</a>
        <ul class="subMenu subnavborder" id="subNav"> 
            <li><a href="editorial.html">editorial</a></li>
            <li><a href="advertising.html">advertising</a></li>
            <li><a href="packaging.html">packaging</a></li>
            <li><a href="photography.html">photography</a></li> 
        </ul>
        </li>
    </ul>
</div>

在这个普通的小提琴中看到它 。我更改了边框颜色以显示它然后随意调整超出的类。

内部边框的替代方案

如果要保留半径，则需要使用伪元素选择器，如本例所示

我使用与以前相同的标记。黑色边框只是为了欣赏内部边框 需要相对位置，因为我们将定位引用这个的伪元素

 .subnavborder {
       position:relative;

        border:1px solid black;
    }

由于内部边框可能与列表装饰冲突，我们会应用一些边距（根据您的意愿）

    .subnavborder li{
       margin:10px;
    }

现在伪元素

.subnavborder:after {
    border: 2px solid #ff0000;
    border-radius:6px;
    content: "";
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    right: 3px;
}

得到它？。我们正在添加一个幽灵元素。修改像素深度、颜色等查看它在这个内部小提琴中的工作

不需要半径？？ 如果你不想使用伪元素，有一个使用属性轮廓的解决方案（但不是半径......）如果你想要它，要求它，我在这里包括它。

于 2013-02-28T16:38:56.800 回答
0

如果您在谈论 HTML5，那么您也在谈论 CSS3，这意味着box-shadow通常支持。

box-shadow支持偏移量，这将使您看起来继续超出边界的背景。

试一试：

ul.subMenu {
    background-color: #93b9bb;
    border: 5px solid #fff

    /* Your other styles here */

    -moz-box-shadow: 0px 0px 0px 10px #93b9bb;
    -webkit-box-shadow: 0px 0px 0px 10px #93b9bb;
    -o-box-shadow: 0px 0px 0px 10px #93b9bb;
    box-shadow: 0px 0px 0px 10px #93b9bb;
}

看看JSFiddle。

这不使用一个:before或:after伪元素 hack 让您拥有更干净的 CSS，以及更容易控制框阴影的事实（没有position: absolute和left right等值）。上述box-shadow属性中的第四个像素值定义了阴影偏移量。0px之前它指定了一个 0px 模糊，即一个完全锐利的阴影。

于 2013-02-28T16:35:30.323 回答