英文:
CSS: Border for list of elements, no overlap but highlighting possible
问题
我有一个带有边框的元素列表。边框不应该重叠。但是：可能有不可见的元素，而且一个元素可能会被不同边框颜色突出显示。
<ul id="navigation_bar">
<li class="first">Projection</li>
<li class="highlighted">Real-Time</li>
<li style="display:none;">Invisible</li>
<li>Cleanup</li>
</ul>
#navigation_bar {
overflow: hidden;
list-style-type: none;
width: 100%;
}
#navigation_bar li {
text-align: center;
width: 32%;
border: 1px solid black;
margin-top: -1px;
}
#navigation_bar li.first {
margin-top: 0px;
}
#navigation_bar li.highlighted {
border: 1px solid red;
}
问题是边框要么重叠，要么没有完全突出显示（正如您在示例中看到的，“Real-Time”的底部边框是黑色的，但应该是红色的）。
有没有仅使用CSS来解决这个问题的想法？
这是我的fiddle链接：
http://jsfiddle.net/wk9ydo41/1/
英文:
I've a list of elements with a border. The border should not overlap. But: There may be elements which are invisible, and one element might be highlighted by a different border-color:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
#navigation_bar {
overflow: hidden;
list-style-type: none;
width: 100%;
}
#navigation_bar li {
text-align: center;
width: 32%;
border: 1px solid black;
margin-top: -1px;
}
#navigation_bar li.first {
margin-top: 0px;
}
#navigation_bar li.hilighted {
border: 1px solid red;
}
<!-- language: lang-html -->
<ul id="navigation_bar">
<li class="first">Projection</li>
<li class="hilighted">Real-Time</li>
<li style="display:none;">Invisible</li>
<li>Cleanup</li>
</ul>
<!-- end snippet -->
My problem is that either the borders overlap, or not the full border is highlighted (as you can see in my example, the bottom-border of "Real-Time" is black, but it should be red).
Any ideas how to do this just using css?
Here's my fiddle:
http://jsfiddle.net/wk9ydo41/1/
答案1
得分: 1
为了使完整的高亮边框可见，您需要使用 z-index 来提升该元素的层级。但是要使用 z-index，您需要设置非静态定位。您可以使用 position: relative：
#navigation_bar {
overflow: hidden;
list-style-type: none;
width: 100%;
}
#navigation_bar li {
text-align: center;
width: 32%;
border: 1px solid black;
margin-top: -1px;
}
#navigation_bar li.first {
margin-top: 0px;
}
#navigation_bar li.hilighted {
border: 1px solid red;
position: relative;
z-index: 100;
}
<ul id="navigation_bar">
<li class="first">Projection</li>
<li class="hilighted">Real-Time</li>
<li style="display:none;">Invisible</li>
<li>Cleanup</li>
</ul>
英文:
To have the full highlighted border visible you need to elevate that element with z-index. However to use z-index you need a non-static positioning. You can use position: relative for it:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
#navigation_bar {
overflow: hidden;
list-style-type: none;
width: 100%;
}
#navigation_bar li {
text-align: center;
width: 32%;
border: 1px solid black;
margin-top: -1px;
}
#navigation_bar li.first {
margin-top: 0px;
}
#navigation_bar li.hilighted {
border: 1px solid red;
position: relative;
z-index: 100;
}
<!-- language: lang-html -->
<ul id="navigation_bar">
<li class="first">Projection</li>
<li class="hilighted">Real-Time</li>
<li style="display:none;">Invisible</li>
<li>Cleanup</li>
</ul>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论