时间戳

首页 > 解决方案 > 与对称对齐

javascript - 与对称对齐

问题描述

我创建了一个在线商店。菜单需要清理。为此，创建了 3 个元素 .leftside、.rightside、.centerplace 和 .nestedblock。它们用于标记（右侧必须不可见）

<html>

<head>
  <style type="text/css">
    * {
      list-style: none;
      text-decoration: none;
      margin: 0;
      padding: 0;
    }
    
    ul {
      background: #afafaf;
      display: inline-block;
      width: 420px;
      border-right: 1px solid #000;
    }
    
    ul li {
      padding: 6px 0;
      background: #fff;
      display: inline-flex;
    }
    
    ul li:hover {
      background: lightgreen;
    }
    
    ul li a {
      color: #000;
    }
    
    ul li:hover a,
    ul li:hover .fa {
      color: #fff;
    }
    
    ul li .fa {
      margin-left: 16px;
      display: inline-block;
      width: 30px;
      height: 30px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    
    .leftside {
      margin-left: 16px;
      display: inline-block;
      width: 30px;
      height: 30px;
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .rightside {
      margin-right: 16px;
      display: none;
      width: 30px;
      height: 30px;
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .centerplace {
      width: 328px;
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .nestedblock {
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
  </style>

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>
  <ul>
    <li>
      <div class="leftside">
        <i class="fa fa-home"></i>
      </div>
      <div class="centerplace">
        <a href="" class="nestedblock">Техника для кухни</a>
      </div>
      <div class="rightside">
        <i class="fa fa-home"></i>
      </div>
    </li>
    <li>
      <i class="fa fa-star"></i>
      <a href="">Бытовая техника для дома</a>
    </li>
    <li>
      <i class="fa fa-youtube"></i>
      <a href="">Техника для прихожей и гостинной</a>
    </li>
    <li>
      <i class="fa fa-facebook"></i>
      <a href="">Телевизоры и аудиотехника</a>
    </li>
  </ul>
</body>

</html>

如何让图标位于侧面并使用 flex 使超链接居中？（右起第二个图标不可见，图片和铭文在所需位置）

标签： javascripthtmlcssweblayout

解决方案

那是你要的吗？

<html>

<head>
  <style type="text/css">
    * {
      list-style: none;
      text-decoration: none;
      margin: 0;
      padding: 0;
    }
    
    ul {
      background: #afafaf;
      display: flex;
      flex-flow: column;
      width: 100%;
      height: 100%;
      border-right: 1px solid #000;
    }
    
    ul li {
      padding: 6px 0;
      width: 100%
      background: #fff;
      display: inline-flex;
    }
    
    ul li:hover {
      background: lightgreen;
    }
    
    ul li a {
      color: #000;
    }
    
    ul li:hover a,
    ul li:hover .fa {
      color: #fff;
    }
    
    ul li .fa {
      margin-left: 16px;
      display: inline-block;
      width: 30px;
      height: 30px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    
    .leftside {
      margin-left: 10px;
      display: inline-block;
      width: 30px;
      height: 30px;
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .rightside {
      margin-right: 16px;
      display: none;
      width: 30px;
      height: 30px;
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .centerplace {
      width: 328px;
    
    }
    
    .nestedblock {
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .firstLi {
     width: 100%;
     display: flex;
     justify-content: space-between;
    }
  </style>

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>
  <ul>
    <li class="firstLi">
      <div class="leftside">
        <i class="fa fa-home"></i>
      </div>
      <div class="centerplace">
        <a href="" class="nestedblock">Техника для кухни</a>
      </div>
    <p></p>
    </li>
    <li>
      <i class="fa fa-star"></i>
      <a href="">Бытовая техника для дома</a>
    </li>
    <li>
      <i class="fa fa-youtube"></i>
      <a href="">Техника для прихожей и гостинной</a>
    </li>
    <li>
      <i class="fa fa-facebook"></i>
      <a href="">Телевизоры и аудиотехника</a>
    </li>
  </ul>
</body>

</html>

推荐阅读