[分享]css下拉菜单与内容对齐

在网页设计中，下拉菜单是一个非常常见的功能。但是有时候我们会发现下拉菜单的内容与菜单的位置不对齐，造成页面的不美观。下面我们来学习一下如何通过CSS来调整下拉菜单和内容的对齐。 1、使用displ...

在网页设计中，下拉菜单是一个非常常见的功能。但是有时候我们会发现下拉菜单的内容与菜单的位置不对齐，造成页面的不美观。下面我们来学习一下如何通过CSS来调整下拉菜单和内容的对齐。

1、使用display: inline-block;将菜单项和下拉内容包裹在一个中。

<div class="menu">
    <div>选项1</div>
    <div class="submenu">
        <ul>
            <li>选项1-1</li>
            <li>选项1-2</li>
            <li>选项1-3</li>
        </ul>
    </div>
</div>
 
<style>
    .menu div {
        display: inline-block;
    }
     
    .submenu {
        display: none;
    }
</style> 

2、使用position属性来调整下拉内容的位置。

 .menu:hover .submenu {
     display: block;
     position: absolute;
     top: 20px;
     left: 0;
 } 

3、使用padding属性来调整下拉菜单的位置。

 .menu div {
     padding-right: 20px;
 } 

通过以上三种方式，我们可以轻松的实现下拉菜单与内容的对齐。