Question

<body>
  <div class="nav">
    <div class="container">
      <ul>
        <li><a href="file:///C:/Documents%20and%20Settings/USER1/My%20Documents/Gary%20Nauman/index.html#">Home</a>
        </li>
        <li><a href="file:///C:/Documents%20and%20Settings/USER1/My%20Documents/Gary%20Nauman/browse.html">Browse</a>
        </li>

        <li><a href="#">About the Artist</a>
        </li>
        <li><a href="#">Contact</a>
        </li>
        <li><a href="#">Help</a>
        </li>
        <li>
          <a href="https://www.facebook.com/gary.nauman">
            <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTIxiKzqYh3OHT8LXw268axd6OfuFqgOqxNAr2kWqBL0xeRVfRFuw" alt="https://www.facebook.com/gary.nauman" width="42" height="42" border="0">
          </a>
        </li>
        <li>
          <a href="https://garynauman.wordpress.com/">
            <img src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/black-ink-grunge-stamps-textures-icons-social-media-logos/097743-black-ink-grunge-stamp-textures-icon-social-media-logos-wordpress.png" alt="https://garynauman.wordpress.com/"
            width="42" height="42" border="0">
          </a>
        </li>
      </ul>
    </div>
  </div>

  <div id="art">

    <img src="C:\Documents and Settings\USER1\My Documents\Downloads\gknproject\goodtidings.jpg" width="400" height="400" align="middle" class="image" style="padding-left:400px" style="padding-top:50px" />

    <hr width="40%">
    <img src="C:\Documents and Settings\USER1\My Documents\Downloads\gknproject\coffee.jpg" width="200" height="200" class="image" />

  </div>

我需要图像不在导航栏下面，我一直在搜索大约一个小时但没找到任何东西。如何用CSS移动图像？

Answer 1

我认为这对你有用

＆＃13;

nav,
.container {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
}
.container ul li {
  display: inline-block;
  list-style-type: none;
}
ul.menu,
ul.icons {
  display: inline-block;
}
#art {
  padding-top: 70px;
  display: inline-block;
  width: 100%;
}
img.image1 {
  width: 400px;
  height: 400px;
  margin-left: auto;
  margin-right: auto;
}
img.image2 {
  width: 200px;
  height: 200px;
  padding-left: 20px;
}
hr {
  width: 350px;
  margin-top: 20px;
}
img,
hr {
  display: block;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>

  <body>
    <nav>
      <div class="container">
        <ul class="menu">
          <li><a href="file:///C:/Documents%20and%20Settings/USER1/My%20Documents/Gary%20Nauman/index.html#">Home</a>
          </li>
          <li><a href="file:///C:/Documents%20and%20Settings/USER1/My%20Documents/Gary%20Nauman/browse.html">Browse</a>
          </li>

          <li><a href="#">About the Artist</a>
          </li>
          <li><a href="#">Contact</a>
          </li>
          <li><a href="#">Help</a>
          </li>
        </ul>
        <ul class="icons">
          <li>
            <a href="https://www.facebook.com/gary.nauman">
              <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTIxiKzqYh3OHT8LXw268axd6OfuFqgOqxNAr2kWqBL0xeRVfRFuw" alt="https://www.facebook.com/gary.nauman" width="42" height="42" border="0">
            </a>
          </li>
          <li>
            <a href="https://garynauman.wordpress.com/">
              <img src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/black-ink-grunge-stamps-textures-icons-social-media-logos/097743-black-ink-grunge-stamp-textures-icon-social-media-logos-wordpress.png" alt="https://garynauman.wordpress.com/"
              width="42" height="42" border="0">
            </a>
          </li>
        </ul>
      </div>
    </nav>

    <div id="art">

      <img class="image1" src="C:\Documents and Settings\USER1\My Documents\Downloads\gknproject\goodtidings.jpg" />

      <hr>
      <img class="image2" src="C:\Documents and Settings\USER1\My Documents\Downloads\gknproject\coffee.jpg" />
    </div>


  </body>

</html>

＆＃13;

CSS不会在屏幕上移动图像。如何使用HTML / CSS解决此问题？

1 个答案: