Question

我希望所有图像都集中在页面上，但也要一个接一个地重复边距和所有这些。问题是，它们都是这样的直线：它们应该从左到右。

我的HTML / CSS：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Join the Team</title>
  </head>
  <style>
    .__applyingfor {
      width: 500px;
      height: 150px;
      margin: auto auto;
      text-align: center;
    }

    .__applyoptions {
      display: flex;
      justify-content: center;
    }

    .__applyoptions ul{
      display: flex;
      list-style-type: none;
      margin: 0;
      background-size: cover;
      padding: 10px;
    }

    .__applyoptions ul li{
      margin-right: 1px;
    }

    .__applyoptions ul a{
      display: flex;
      position: relative;
    }

    .__apply-normal:hover {
      opacity: 1;
    }

    .__apply-hover {
      top: 0;
      left: 0;
      position: absolute;
      opacity: 0;
    }

    .__apply-hover:hover {
      opacity: 1;
    }

    #__title {
      font-size: 25px;
    }

    #__title:hover {
      color: #18A7B2;
    }
  </style>
  <body>
    <div class="__applyingfor">
      <p id="__title">What Are You Applying For?</p>
    </div>
    <div class="__applyoptions">
      <ul>
        <li>
          <a href="#">
            <img class="__apply-normal" src="../images/helperapp.png">
            <img class="__apply-hover" src="../images/helperapph.png">
          </a>
          <a href="#">
            <img class="__apply-normal" src="../images/modapp.png">
            <img class="__apply-hover" src="../images/modapph.png">
          </a>
          <a href="#">
            <img class="__apply-normal" src="../images/adminapp.png">
            <img class="__apply-hover" src="../images/adminapph.png">
          </a>
          <a href="#">
            <img class="__apply-normal" src="../images/devapp.png">
            <img class="__apply-hover" src="../images/devpph.png">
          </a>
        </li>
      </ul>
    </div>
  </body>
</html>

Answer 1

您可以在display: inline-flex;中添加display:flex;或删除.__applyoptions ul a{。

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Join the Team</title>
  </head>
  <style>
    .__applyingfor {
      width: 500px;
      height: 150px;
      margin: auto auto;
      text-align: center;
    }

    .__applyoptions {
      display: flex;
      justify-content: center;
      
    }

    .__applyoptions ul{
      display: flex;
      list-style-type: none;
      margin: 0;
      background-size: cover;
      padding: 10px;
    }

    .__applyoptions ul li{
      margin-right: 1px;
      
    }

    .__applyoptions ul a{
      display: inline-flex;
      position: relative;
    }

    .__apply-normal:hover {
      opacity: 1;
    }

    .__apply-hover {
      top: 0;
      left: 0;
      position: absolute;
      opacity: 0;
    }

    .__apply-hover:hover {
      opacity: 1;
    }

    #__title {
      font-size: 25px;
    }

    #__title:hover {
      color: #18A7B2;
    }
    
  </style>
  <body>
    <div class="__applyingfor">
      <p id="__title">What Are You Applying For?</p>
    </div>
    <div class="__applyoptions">
      <ul>
        <li>
          <a href="#">
            <img class="__apply-normal" src="http://placehold.it/100x150">
            <img class="__apply-hover" src="http://placehold.it/100x150">
          </a>
          <a href="#">
            <img class="__apply-normal" src="http://placehold.it/100x150">
            <img class="__apply-hover" src="http://placehold.it/100x150">
          </a>
          <a href="#">
            <img class="__apply-normal" src="http://placehold.it/100x150">
            <img class="__apply-hover" src="http://placehold.it/100x150">
          </a>
          <a href="#">
            <img class="__apply-normal" src="http://placehold.it/100x150">
            <img class="__apply-hover" src="http://placehold.it/100x150">
          </a>
        </li>
      </ul>
    </div>
  </body>
</html>

＆＃13;

Answer 2

试试这个。已从ID, ColumnA, ColumnB ------------------- 1 cars shirts 2 tvs dogs移除display: flex;。您只需要__applyoptions ul a到容器。

＆＃13;

display:flex;

＆＃13;

.__applyingfor {
  width: 500px;
  height: 150px;
  margin: auto auto;
  text-align: center;
}

.__applyoptions {
  display: flex;
  justify-content: center;
}

.__applyoptions ul {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  margin: 0;
  background-size: cover;
  padding: 10px;
}

.__applyoptions ul li {
  margin-right: 1px;
}

.__applyoptions ul a {
  position: relative;
}

.__apply-normal:hover {
  opacity: 1;
}

.__apply-hover {
  top: 0;
  left: 0;
  position: absolute;
  opacity: 0;
}

.__apply-hover:hover {
  opacity: 1;
}

#__title {
  font-size: 25px;
}

#__title:hover {
  color: #18A7B2;
}

＆＃13;

Answer 3

只需将<body> <div class="__applyingfor"> <p id="__title">What Are You Applying For?</p> </div> <div class="__applyoptions"> <ul> <li> <a href="#"> <img class="__apply-normal" src="../images/helperapp.png"> <img class="__apply-hover" src="../images/helperapph.png"> </a> <a href="#"> <img class="__apply-normal" src="../images/modapp.png"> <img class="__apply-hover" src="../images/modapph.png"> </a> <a href="#"> <img class="__apply-normal" src="../images/adminapp.png"> <img class="__apply-hover" src="../images/adminapph.png"> </a> <a href="#"> <img class="__apply-normal" src="../images/devapp.png"> <img class="__apply-hover" src="../images/devpph.png"> </a> </li> </ul> </div> </body>添加到.__ applyoptions ul a {}部分：

float:left;

jsfiddle

Answer 4

使用以下属性替换您的li样式：

.__applyoptions ul li { 
 margin-right: 1px;
 float: left;
 display: inline-flex;
}

问题正确对齐图像

4 个答案: