Question

好吧，我想将列表的内容与底部对齐，以便它们能够以一种整齐的方式与彼此对齐，或者如果你们有其他方法可以做到这一点，我会很感激。

.container-fluid {
    padding-right: 0px !important;
    padding-left: 0px !important;
}

ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}


ul.topnav li {
    float: right;
}


ul.topnav li a {
    padding-top: 39px;
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}


ul.topnav li a:hover {
    background-color: #555;
}


ul.topnav li.icon {
    display: none;
}



@media screen and (max-width:768px) {
    ul.topnav li:not(:first-child) {
        display: none;
    }
    ul.topnav li.icon {
        float: right;
        display: inline-block;
    }
}


@media screen and (max-width:768px) {
    ul.topnav.responsive {
        position: relative;
    }
    ul.topnav.responsive li.icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    ul.topnav.responsive li {
        float: none;
        display: inline;
    }
    ul.topnav.responsive li a {
        display: block;
        text-align: left;
    }
}

<!-- begin snippet: js hide: false console: true babel: false -->

<div class="container-fluid">
    <header>
        <ul class="topnav" id="myTopnav">
            <li class="pull-left"><a><h1>Logo-Text</h1></a></li>
            <li><a href="#home">Home</a></li>
            <li><a href="#news">News</a></li>
            <li><a href="find">Find us</a></li>
            <li><a href="#about">About</a></li>
            <li class="icon">
                <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a>
            </li>
        </ul>
    </header>
</div>

Answer 1

.container-fluid {
    padding-right: 0px !important;
    padding-left: 0px !important;
}

ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
  text-align: right;
  padding-bottom: 5px;
}


ul.topnav li {
  border-bottom: 1px solid #ffffff;
    display: inline-block;
    vertical-align: bottom;
}


ul.topnav li a {
    padding-top: 39px;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
  line-height: 1;
}

ul.topnav li a h1{
  margin: 0;
}


ul.topnav li a:hover {
    background-color: #555;
}


ul.topnav li.icon {
    display: none;
}



@media screen and (max-width:768px) {
    ul.topnav li:not(:first-child) {
        display: none;
    }
    ul.topnav li.icon {
        float: right;
        display: inline-block;
    }
}


@media screen and (max-width:768px) {
    ul.topnav.responsive {
        position: relative;
    }
    ul.topnav.responsive li.icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    ul.topnav.responsive li {
        float: none;
        display: inline;
    }
    ul.topnav.responsive li a {
        display: block;
        text-align: left;
    }
}

<!-- begin snippet: js hide: false console: true babel: false -->

<div class="container-fluid">
    <header>
        <ul class="topnav" id="myTopnav">
            
            <li><a href="#home">Home</a></li>
            <li><a href="#news">News</a></li>
            <li><a href="find">Find us</a></li>
            <li><a href="#about">About</a></li>
            <li class="icon">
                <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a>
            </li>
          <li><a><h1>Logo-Text</h1></a></li>
        </ul>
    </header>
</div>

我只是从li删除了浮动广告。 ul将text-align: right;然后

li{ display: inline-block; vertical-align: bottom; }

它会使您的列表项底部对齐。希望这有帮助。

将内容与底部对齐（Navbar）

1 个答案: