移动屏幕下悬停下拉内容对齐问题

针对移动屏幕下悬停下拉的对齐问题，可以使用CSS媒体查询来针对移动屏幕设定不同的样式。具体来说，可以在CSS中针对移动屏幕添加下面的代码：

@media only screen and (max-width: 768px) { /* 在移动屏幕下调整悬停下拉样式 / .dropdown:hover .dropdown-content { display: block; position: relative; / added / width: 100%; / added / margin: 0; } .dropdown-content a { display: block; text-align: center; / added */ } }

以上代码将移动屏幕下的悬停下拉菜单的内容居中对齐。这些样式仅在屏幕宽度小于等于 768 像素时生效。

下面是完整的HTML和CSS代码示例：

HTML代码：

<div class="dropdown"> <a href="#">Dropdown</a> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div>

CSS代码：

/* 悬停下拉样式 */ .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; z-index: 1; } .dropdown-content a { display: block; text-align: left; } .dropdown:hover .dropdown-content { display: block; }

@media only screen and (max-width: 768px) { /* 在移动屏幕下调整悬停下拉样式 / .dropdown:hover .dropdown-content { display: block; position: relative; / added / width: 100%; / added / margin: 0; } .dropdown-content a { display: block; text-align: center; / added */ } }