HTML / CSS文本对齐和div错误

Question

我正在测试我过去遇到的一些对齐问题，并试图解决这个问题。

我正在这里做两件事。

1. 我想做的是将绿色框中的文本一直向左对齐，使其边缘像上面的“ SHOP BY”。 是的，他们俩。

2. 是的，您可以从颜色框中看到，绿色框与其父蓝色框的边缘不完全相交。 我尝试了一切。 而且我找不到解决方案。

提前致谢！

 .main-nav { background: #000; height: 30px; position: relative; overflow: visible; z-index: 2; width: 100%; left: 0; cursor: default; } .main-nav .inner{ height: 100%; } .nav-whats-new:hover a.nav-level-1{ background: white; color: black; } .main-nav>.inner{ text-align: justify; } .nav-links-container { position: static; /* background: red; */ height: 100%; } .nav-links{ padding: 0 0 0 3px; display: inline; margin-bottom: 20px; overflow: hidden; /*background-color: green; */ } li { vertical-align: top; padding: 5px; display: inline-block; /* background: blue; */ } li>a { color: #FFF; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; padding: 10px 9px 9px; margin: 0 -3px; } /*li>a:hover { background-color: white; color:#000; }*/ .nav-level-2 { /* display: none; */ position: absolute; top: 30px; left: 0; width: 100%; height: auto; border-bottom: 5px solid #000; background: white; text-align: left; } li>a:hover + .nav-level-2{ display: block; } .nav-level-2:hover{ display: block; } .nav-level-2-container { padding-top: 40px; padding-bottom: 40px; background: lightgreen; -webkit-box-flex: 0; } .row{ display: flex; flex: 0 1 auto; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; } .list-container { padding: 0px; } .col-lg-2{ flex-basis: 16.666666667%; max-width: 16.666666667%; box-sizing: border-box; display: flex; flex: 0 1 auto; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-flex: 0; background: red; margin-left: 5px; } .main-nav>.inner .nav-level-2 .nav-level-2-container .heading { text-transform: uppercase; color: #000; letter-spacing: 1px; font-size: 14px; margin: 0 0 20px; } .main-nav .nav-links .nav-level-2 ul { width: 100%; margin: 0px; padding: 0px; background: blue; display: block; } .main-nav>.inner .nav-level-2 .nav-level-2-container li { margin-bottom: 12px; } .invisible{ display: none; } .main-nav>.inner .nav-level-2 .nav-level-2-container li a { font-size: 13px; line-height: 17px; letter-spacing: .5px; color: #000; display: inline; background: green; } 

  <nav class="main-nav"> <div class="inner max-girdle-width"> <div class="nav-links-container"> <ul class="nav-links"> <li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a> <div class="nav-level-2"> <div class="nav-level-2-container row max-girdle-width"> <div class="list-container shop col-lg-2"> <h3 class="heading"> Shop by</h3> <ul> <li class="invisible"></li> <li > <a href="#">This Week</a> </li> <li > <a href="#">This Month</a> </li> </ul> </div> </div> </div> </li> </ul> </div> </div> </nav> 

Answer 1

这是您要找的东西吗，我刚换了li和li> a

li {
    vertical-align: top;
    padding-top: 8px;
    display: inline-block; }

li>a {
    color: #FFF;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 10px 9px 9px 0px; }

Answer 2

这就是你想要的吗？

 .main-nav { background: #000; height: 30px; position: relative; overflow: visible; z-index: 2; width: 100%; left: 0; cursor: default; } .main-nav .inner{ height: 100%; } .nav-whats-new:hover a.nav-level-1{ background: white; color: black; } .main-nav>.inner{ text-align: justify; } .nav-links-container { position: static; /* background: red; */ height: 100%; } .nav-links{ padding: 0 0 0 3px; display: inline; margin-bottom: 20px; overflow: hidden; /*background-color: green; */ } li { vertical-align: top; padding-top: 7px !important; //here is the change display: inline-block; /* background: blue; */ } li>a { color: #FFF; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; padding: 10px 9px 9px; margin: 0px; //here is the change } /*li>a:hover { background-color: white; color:#000; }*/ .nav-level-2 { /* display: none; */ position: absolute; top: 30px; left: 0; width: 100%; height: auto; border-bottom: 5px solid #000; background: white; text-align: left; } li>a:hover + .nav-level-2{ display: block; } .nav-level-2:hover{ display: block; } .nav-level-2-container { padding-top: 40px; padding-bottom: 40px; background: lightgreen; -webkit-box-flex: 0; } .row{ display: flex; flex: 0 1 auto; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; } .list-container { padding: 0px; position: relative; } .col-lg-2{ flex-basis: 16.666666667%; max-width: 16.666666667%; box-sizing: border-box; display: flex; flex: 0 1 auto; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-flex: 0; background: red; margin-left: 5px; } .main-nav>.inner .nav-level-2 .nav-level-2-container .heading { text-transform: uppercase; color: #000; letter-spacing: 1px; font-size: 14px; margin: 0 0 20px; } .main-nav .nav-links .nav-level-2 ul { width: 100%; margin: 0px; padding: 0px; background: blue; display: block; } .main-nav>.inner .nav-level-2 .nav-level-2-container li { margin-bottom: 12px; } .invisible{ display: none; } .main-nav>.inner .nav-level-2 .nav-level-2-container li a { font-size: 13px; line-height: 17px; letter-spacing: .5px; color: #000; display: inline; background: green; } 

  <nav class="main-nav"> <div class="inner max-girdle-width"> <div class="nav-links-container"> <ul class="nav-links"> <li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a> <div class="nav-level-2"> <div class="nav-level-2-container row max-girdle-width"> <div class="list-container shop col-lg-2"> <h3 class="heading"> Shop by</h3> <ul> <li class="invisible"></li> <li > <a href="#">Week</a> </li> <li > <a href="#">This Month</a> </li> </ul> </div> </div> </div> </li> </ul> </div> </div> </nav>