Question

我试过玩％，但是照片不断相互拼接而不是并排坐着。我只是想让每张照片水平地坐在一起。任何关于我做错的想法？ Ps我是新编码所以，如果这是一个简单的修复我的坏

段：

body{
  margin:0 auto 0 auto;
	max-width: 750px;
}

li{
	display:inline-block;
	width:25%;
}

<div class="uno">
	  <li>Anime</li>
	<ol>
		<li>
        <a href="http://cowboybebop.wikia.com/wiki/Main_Page"> 
         <img src="http://i.imgur.com/RmlPLKy.jpg" 
            alt="See you in space cowboy..." width="500" hight="500"
                >Cowboy Bebop</li>`   
    
                                                                                    
	

      <li> 
     <a href="http://fma.wikia.com/wiki/Main_Page"> 
      <img src="http://68.media.tumblr.com/291ca87d855bf9fce76a148b3ebbf262/tumblr_n4ygiesFsG1sji00bo1_1280.jpg" 
       alt="Best Alchemist" width="500" hight="500"
         >Full Metal Alchemist</li>

	
    <li> 
         <a href="http://gundam.wikia.com/wiki/Mobile_Suit_Gundam_Wing"> 
          <img src="http://cdn.pcwallart.com/images/gundam-wing-deathscythe-wallpaper-2.jpg" alt="Death Scythe" width="500" hight="500"
                     >Gundam Wing</li>

		

   
		

    <li>
          <a href="http://champloo.wikia.com/wiki/Samurai_Champloo_Wiki"> 
           <img src="https://i.pinimg.com/originals/26/5b/c7/265bc7d70425503b0e9c9c3226b4bfcd.jpg" 
             alt="Jin Fuu Mugen" width="500" hight="500"
                 >Samurai Champloo</a></li>
	</ol></div>

Answer 1

我会在display: flex;上进行ol。您也没有关闭列表中的<a>，使其无效标记。

＆＃13;

.uno-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}

.uno-list li {
  flex-basis: 25%;
  margin-bottom: 10px;
  margin-right: 10px;
  background-color: deeppink;
}

.uno-list a {
  display: block;
}

.uno-list img {
  width: 100%;
  position: relative;
  top: 0;
}

＆＃13;

<div class="uno">
  <ol class="uno-list">
    <li>
      <a href="http://cowboybebop.wikia.com/wiki/Main_Page">
        <img src="http://i.imgur.com/RmlPLKy.jpg" alt="See you in space cowboy..." width="500" hight="500"> Cowboy Bebop</a>
    </li>

    <li>
      <a href="http://fma.wikia.com/wiki/Main_Page">
        <img src="http://68.media.tumblr.com/291ca87d855bf9fce76a148b3ebbf262/tumblr_n4ygiesFsG1sji00bo1_1280.jpg" alt="Best Alchemist" width="500" hight="500"> Full Metal Alchemist
      </a>
    </li>


    <li>
      <a href="http://gundam.wikia.com/wiki/Mobile_Suit_Gundam_Wing">
        <img src="http://cdn.pcwallart.com/images/gundam-wing-deathscythe-wallpaper-2.jpg" alt="Death Scythe" width="500" hight="500"> Gundam Wing
      </a>
    </li>


    <li>
      <a href="http://champloo.wikia.com/wiki/Samurai_Champloo_Wiki">
        <img src="https://i.pinimg.com/originals/26/5b/c7/265bc7d70425503b0e9c9c3226b4bfcd.jpg" alt="Jin Fuu Mugen" width="500" hight="500">Samurai Champloo</a>
    </li>
  </ol>
</div>

＆＃13;

Answer 2

如果您想要将图像水平放置在彼此旁边，则不应像使用（max-width: 750px;）那样使用非常短的宽度，并且不需要将其放在列表中。所以这是你的代码：

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
    a{
      float: left;
    }
  </style>
</head>
<body>
  <div class="uno">
        <a href="http://cowboybebop.wikia.com/wiki/Main_Page">
         <img src="http://i.imgur.com/RmlPLKy.jpg" 
            alt="See you in space cowboy..." width="500" hight="500"
                >Cowboy Bebop</a>
     <a href="http://fma.wikia.com/wiki/Main_Page"> 
      <img src="http://68.media.tumblr.com/291ca87d855bf9fce76a148b3ebbf262/tumblr_n4ygiesFsG1sji00bo1_1280.jpg" 
       alt="Best Alchemist" width="500" hight="500"
         >Full Metal Alchemist</a>

         <a href="http://gundam.wikia.com/wiki/Mobile_Suit_Gundam_Wing"> 
          <img src="http://cdn.pcwallart.com/images/gundam-wing-deathscythe-wallpaper-2.jpg" alt="Death Scythe" width="500" hight="500"
                     >Gundam Wing</a>

          <a href="http://champloo.wikia.com/wiki/Samurai_Champloo_Wiki"> 
           <img src="https://i.pinimg.com/originals/26/5b/c7/265bc7d70425503b0e9c9c3226b4bfcd.jpg" 
             alt="Jin Fuu Mugen" width="500" hight="500"
                 >Samurai Champloo</a>
  </div>
</body>
</html>
<body>

我如何对齐照片

2 个答案: