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