Question

所以，基本上我开始在投资组合网站上工作来展示我的作品。我需要让它真正具有功能性和吸引力，所以观看网站的人都知道我的能力。

对于你们来说这可能是非常基本的，但在我的代码中，UL在＃nav-bar div中，我希望它的高度相同，然后是li项。

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

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

这是我的代码：

＆＃13;

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);
     }

＆＃13;

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

＆＃13;

Answer 1

    public void getInfo(PhoneBook PB)
{
    Scanner keyboard = new Scanner(System.in).useDelimiter("\n");
    String c1 = "yes";
    do {

        System.out.print("Name:");
        PB.setName(keyboard.nextLine());
        System.out.print("Family:");
        PB.setFamily(keyboard.nextLine());
        System.out.print("Address:");
        PB.setAddress(keyboard.nextLine());
        System.out.print("Number:");
        PB.setNumber(keyboard.nextLong());

        System.out.println("Do you want to continue(yes/no)");
        c1 = keyboard.nextLine();
        phoneBooks.add(PB);
    }while (c1.equals("yes"));
}

#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);
}

Answer 2

这里有一些可能更接近你想要的输出的东西：

＆＃13;

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);
}

＆＃13;

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

＆＃13;

使<ul>高度与<div>相同，然后<li>将山姆高度设为<ul>

2 个答案: