HTML 菜单标记位置

Question

我不明白，就我而言，如何通过只创建一个 class 菜单而不是 menu_left 和 menu_right class 来正确定位菜单. 如何优化这里的 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>

Menu Image 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

See flexbox menu here

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，请使用三个 class 而不是两个：一个用于包含所有公共设置的两个元素的公共 class，以及两个单独的class包含不同设置的两个元素：

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>

HTML 菜单标记位置

HTML menu markup position

html

css

responsive

尝试使用 Flexbox

HTML

CSS