CSS：元素列表的边框，不重叠但可以高亮显示

huangapple
go评论102阅读模式
英文:

CSS: Border for list of elements, no overlap but highlighting possible

问题

我有一个带有边框的元素列表。边框不应该重叠。但是：可能有不可见的元素，而且一个元素可能会被不同边框颜色突出显示。

  1. <ul id="navigation_bar">
  2.   <li class="first">Projection</li>
  3.   <li class="highlighted">Real-Time</li>
  4.   <li style="display:none;">Invisible</li>
  5.   <li>Cleanup</li>
  6. </ul>
  1. #navigation_bar {
  2.   overflow: hidden;
  3.   list-style-type: none;
  4.   width: 100%;
  5. }
  7. #navigation_bar li {
  8.   text-align: center;
  9.   width: 32%;
  10.   border: 1px solid black;
  11.   margin-top: -1px;
  12. }
  14. #navigation_bar li.first {
  15.   margin-top: 0px;
  16. }
  18. #navigation_bar li.highlighted {
  19.   border: 1px solid red;
  20. }

问题是边框要么重叠，要么没有完全突出显示（正如您在示例中看到的，“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 -->

  1. #navigation_bar {
  2.   overflow: hidden;
  3.   list-style-type: none;
  4.   width: 100%;
  5. }
  7. #navigation_bar li {
  8.   text-align: center;
  9.   width: 32%;
  10.   border: 1px solid black;
  11.   margin-top: -1px;
  12. }
  14. #navigation_bar li.first {
  15.   margin-top: 0px;
  16. }
  18. #navigation_bar li.hilighted {
  19.   border: 1px solid red;
  20. }

<!-- language: lang-html -->

  1. &lt;ul id=&quot;navigation_bar&quot;&gt;
  2.   &lt;li class=&quot;first&quot;&gt;Projection&lt;/li&gt;
  3.   &lt;li class=&quot;hilighted&quot;&gt;Real-Time&lt;/li&gt;
  4.   &lt;li style=&quot;display:none;&quot;&gt;Invisible&lt;/li&gt;
  5.   &lt;li&gt;Cleanup&lt;/li&gt;
  6. &lt;/ul&gt;

<!-- 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：

  1. #navigation_bar {
  2.   overflow: hidden;
  3.   list-style-type: none;
  4.   width: 100%;
  5. }
  7. #navigation_bar li {
  8.   text-align: center;
  9.   width: 32%;
  10.   border: 1px solid black;
  11.   margin-top: -1px;
  12. }
  14. #navigation_bar li.first {
  15.   margin-top: 0px;
  16. }
  18. #navigation_bar li.hilighted {
  19.   border: 1px solid red;
  20.   position: relative;
  21.   z-index: 100;
  22. }
  1. <ul id="navigation_bar">
  2.   <li class="first">Projection</li>
  3.   <li class="hilighted">Real-Time</li>
  4.   <li style="display:none;">Invisible</li>
  5.   <li>Cleanup</li>
  6. </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 -->

  1. #navigation_bar {
  2.   overflow: hidden;
  3.   list-style-type: none;
  4.   width: 100%;
  5. }
  7. #navigation_bar li {
  8.   text-align: center;
  9.   width: 32%;
  10.   border: 1px solid black;
  11.   margin-top: -1px;
  12. }
  14. #navigation_bar li.first {
  15.   margin-top: 0px;
  16. }
  18. #navigation_bar li.hilighted {
  19.   border: 1px solid red;
  20.   position: relative;
  21.   z-index: 100;
  22. }

<!-- language: lang-html -->

  1. &lt;ul id=&quot;navigation_bar&quot;&gt;
  2.   &lt;li class=&quot;first&quot;&gt;Projection&lt;/li&gt;
  3.   &lt;li class=&quot;hilighted&quot;&gt;Real-Time&lt;/li&gt;
  4.   &lt;li style=&quot;display:none;&quot;&gt;Invisible&lt;/li&gt;
  5.   &lt;li&gt;Cleanup&lt;/li&gt;
  6. &lt;/ul&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月29日 20:46:04
  • 转载请务必保留本文链接：https://go.coder-hub.com/76581204.html
  • border
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定