使 <ul> 高度与 <div> 高度相同，然后 <li> 与 <ul> 高度相同答案

【问题标题】：Making <ul> height same height as <div> and then <li> the sam height as that <ul>使 <ul> 高度与 <div> 高度相同，然后 <li> 与 <ul> 高度相同
【发布时间】：2015-11-28 22:20:07
【问题描述】：

所以，基本上我开始在作品集网站上展示我的作品。我需要让它真正实用和有吸引力，所以浏览该网站的人会知道我的能力。

这对你们来说可能是非常基本的，但在我的代码中，UL 在 #nav-bar div 内，我想使其高度相同，然后是 li 项。

我希望最终结果是 li 的底部边框与整个 div 的底部边框完全重叠（无论屏幕分辨率如何）。

希望，根据我的描述和您从代码中看到的内容，您可以弄清楚我想要做什么。

这是我的代码：

body {
         margin: 0;
     }
     
     #nav-bar {
         width: 100%;
         height: 50px;
         background-color: rgb(40,40,40);
         border-bottom-style: solid;
         border-bottom-color: rgb(238,0,0);
         border-bottom-width: 7.5px;
     }
     
     ul#main-links {
         list-style: none;
         margin: 0;
        padding-top: 14px;
         padding-right: 50px;
         float: right;
        height: 42.5px;
        
     }
     
     ul#main-links li {
         display: inline;
         padding-right: 50px;
         
         border-bottom-style: solid;
         border-bottom-width: 7.5px;
         
         color: white;
         font-family: code;
         font-size: 18px;
         
     }
     
     @font-face {
         font-family: code;
         src: url(Arcon-Regular.otf);
     }

<html>
        <head>
            <title>Portfolio</title>
            <link rel="stylesheet" type="text/css" href="stylesheet.css">
        </head>
        <body>
            <div id="container">
                <div id="nav-bar">
                    <ul id="main-links">
                        <li>About</li>
                        <li>Work</li>
                        <li>Contact</li>
                        
                    </ul>
                </div>
            </div>
        </body>
    </html>

【问题讨论】：

这样 - JSFiddle?
@AnonymousXD 我们缺少stylesheet.css 的内容。这不是它最终的样子。 @Chosen1 您可以通过将 stylesheet.css 作为外部链接加载来更新 Annonymous 的小提琴吗？谢谢。
@Andrei Gheorghiu，只要去掉那个链接 rel 并使用内部 CSS，它应该以同样的方式工作。
你想让你的 li 的白色边框碰到你的 ul 的红色条吗？
Make columns equal heights - with nesting 的可能重复项。这些元素是或可以是块级元素，它们遵循在 SO 和网络中发现的相同技术。

标签： html css

【解决方案1】：

#nav-bar {
  width: 100%;
  height: 50px;
  background-color: rgb(40, 40, 40);
  border-bottom-style: solid;
  border-bottom-color: rgb(238, 0, 0);
  border-bottom-width: 7.5px;
  padding-top: 14px
}

ul#main-links {
  list-style: none;
  margin: 0;
  padding-right: 50px;
  float: right;
  height: 100%;
  border-bottom: 7.5px solid transparent;
  display: block;
}

ul#main-links li {
  display: inline-block;
  padding-right: 50px;
  border-bottom-style: solid;
  border-bottom-width: 7.5px;
  color: white;
  font-family: code;
  font-size: 18px;
  height: 100%;
  position: relative;
  z-index: 2;
}

@font-face {
  font-family: code;
  src: url(Arcon-Regular.otf);
}

<div id="container">
  <div id="nav-bar">
    <ul id="main-links">
      <li>About</li>
      <li>Work</li>
      <li>Contact</li>

    </ul>
  </div>
</div>

【讨论】：

像魅力一样工作。感谢您的帮助。
我认为如果您描述问题所在以及您具体做了什么会很有帮助。

【解决方案2】：

这可能更接近您想要的输出：

body {
    margin: 0;
}
#nav-bar {
    width: 100%;
    height: 50px;
    background-color: rgb(40, 40, 40);
    border-bottom-style: solid;
    border-bottom-color: rgb(238, 0, 0);
    border-bottom-width: 8px;
}
ul#main-links {
    list-style: none;
    margin: 1px 0 0;
    padding-top: 14px;
    padding-right: 50px;
    float: right;
    height: 43px;
    line-height: 50px;
}
ul#main-links li {
    display: inline;
    padding-right: 50px;
    border-bottom-style: solid;
    border-bottom-width: 8px;
    color: white;
    font-family: code;
    font-size: 18px;
}
@font-face {
    font-family: code;
    src: url(Arcon-Regular.otf);
}

<div id="container">
  <div id="nav-bar">
    <ul id="main-links">
      <li>About</li>
      <li>Work</li>
      <li>Contact</li>
    </ul>
  </div>
</div>

【讨论】：

我已经对其进行了一些清理和更新。现在ul 实际上与标题的高度相同。不客气。