HTML菜单标记位置

Question

在我的情况下，我无法理解如何通过只创建一个类菜单而不是menu_left和menu_right类来正确定位菜单。如何在此处优化css？

以下是代码示例：html:

<div class="menu_left" >
<div class="menu__item">
<a href="#" title="Shop" class="menu__item__link"><span class="menu__item__link__text">SHOP</span></a>
</div>
<div class="menu__item">
<a href="" title="about" class="menu__item__link"><span class="menu__item__link__text">ABOUT</span></a>
</div>
</div>
<a href=""  class="logo">
<img src="assets/sds.jpgf" class="logo__image">
</a>
<div class ="menu_right">
<div class="menu__item">
<a href="" title="cart" class="menu__item__link"><span class="menu__item__link__text">CART</span></a>
</div>
<div class="menu__item">
<a href="" title="eur" class="menu__item__link "><span class="menu__item__link__text">EUR</span></a>
</div>
</div>

菜单图像css

.menu_left {
background: rgba(0, 0, 0, 0.85);
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
background: transparent;
float: left;
width: auto;
opacity: 1;
visibility: visible;
-webkit-transition: none;
-moz-transition: none;
transition: none; }
.menu_right{
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
background: transparent;
float: right;
width: auto;
opacity: 1;
visibility: visible;
-webkit-transition: none;
-moz-transition: none;
transition: none; }
}

Answer 1

试用flexbox

请参阅此处的flexbox菜单

html

<div class="menu">
<ul>
<li>
<a href="#">Lorem</a>
</li>
<li>
<a href="#">Lorem</a>
</li>
</ul>
<div class="img"> <!-- replace div with the <img src="" alt="" /> tag -->
img here
</div>
<ul>
<li>
<a href="#">Lorem</a>
</li>
<li>
<a href="#">Lorem</a>
</li>
</ul>
</div>

css

.menu {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px 10px;
background: #ddd;
}
ul {
display: flex;
padding: 0;
list-style: none;
}

a {
padding: 5px 10px;
color: #000;
text-decoration: none;
text-transform: uppercase;
}
.img {
width: 200px;
height:  30px;
display: flex;
align-items: center;
justify-content: center;
background-color: #000;
color:  #fff;
}

Answer 2

要在使用非常相似的设置时优化CSS，请使用三个类而不是两个：一个公共类用于包含所有公共设置的两个元素，两个独立类用于包含不同设置的两种元素：

CSS：

.menu_all {
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
background: transparent;
width: auto;
opacity: 1;
visibility: visible;
-webkit-transition: none;
-moz-transition: none;
transition: none; 
top: auto;
right: auto;
bottom: auto;
left: auto;
background: transparent;
}
.menu_left {
background: rgba(0, 0, 0, 0.85);
float: left;
}
.menu_right{
float: right;
}

和HTML:

<div class="menu_all menu_left" >
<div class="menu__item">
<a href="#" title="Shop" class="menu__item__link"><span class="menu__item__link__text">SHOP</span></a>
</div>
<div class="menu__item">
<a href="" title="about" class="menu__item__link"><span class="menu__item__link__text">ABOUT</span></a>
</div>
</div>
<a href=""  class="logo">
<img src="assets/sds.jpgf" class="logo__image">
</a>
<div class ="menu_all menu_right">
<div class="menu__item">
<a href="" title="cart" class="menu__item__link"><span class="menu__item__link__text">CART</span></a>
</div>
<div class="menu__item">
<a href="" title="eur" class="menu__item__link "><span class="menu__item__link__text">EUR</span></a>
</div>
</div>