问题上对齐图像正确

我想所有的图像将在页面上居中，而且还重复相继与利润率和所有。问题是，他们都排成一条直线，像这样：当他们应该从左到右。问题上对齐图像正确

我的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>

来源

2017-04-26 Squallz

使用 '显示：inline-block的' 而不是 '显示：柔性' –

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

<!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>

来源

2017-04-26 05:17:40 cosmoonot

试试这个。从__applyoptions ul a删除display: flex;。您只需要display:flex;即可。

.__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; 
 
}

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

来源

2017-04-26 05:12:02 athi

只需添加float:left;到.__ applyoptions UL A {}部分：

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

jsfiddle

来源

2017-04-26 05:12:03

为什么使用'浮动：左'当你可以做'display：inline-flex'？ – cosmoonot

替换为以下财产贵丽风格：

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

来源

2017-04-26 05:18:56

问题上对齐图像正确

回答

相关问题