Question

我一直在尝试使用图像创建一个六键导航系统。每张图像为159x159像素（但这可能会改变）。页面宽度目前为1024，允许图像之间有10px的间隙。当我尝试按位置放置图像并在每个图像上都有一个div时，问题出现了，我的代码如下：

.STRAND-container {
	/* Colour Strands Container */
		background-color: #333;
	/* Size of Strands Container */
		width: 1024px;
		height: 179px;
	/* Position Strands Container */
		margin: auto;
}

.STRAND-container img {
	/* Size of Strands */
		width: 159px;
		height: 159px;
	/* Space Boxes Properly */
		padding-top: 10px;
		padding-left: 10px;
		float: left;
	/* Layer Position */
		z-index: 1;
}

.STRAND-container ul,li {
	/* Hide Bullet Points */
	list-style: none;
	/* Position Normally */
	margin: 0px;
	padding: 0px;
}

.STRAND-text {
	width: 159px;
	height: 159px;
	position: absolute;
	background-color: #000;
	text-align: center;
	margin: 10px;
}

.STRAND-text hr {
	width: 80%;
}

.STRAND-text:hover {
	background-color: #FF0000;
}

<html>
	<head>
		<title>Title</title>
		<link href="style.css" rel="stylesheet" type="text/css">
	</head>
	<body>
		<div class="STRAND-container">
		<ul>
			<li>
				<img src="image.jpg">
				<div class="STRAND-text">
					<h1>Strand</h1>
					<hr>
					<h2>Text</h2>
				</div>
			</li>
			<li>
				<img src="image.jpg">
				<div class="STRAND-text">
					
				</div>
			</li>
			<li>
				<img src="image.jpg">
				<div class="STRAND-text">
					<h1>Strand</h1>
					<hr>
					<h2>Text</h2>	
				</div>
			</li>
			<li>
				<img src="image.jpg">
				<div class="STRAND-text">
					<h1>Strand</h1>
					<hr>
					<h2>Text</h2>	
				</div>
			</li>
			<li>
				<img src="image.jpg">
				<div class="STRAND-text">
					<h1>Strand</h1>
					<hr>
					<h2>Text</h2>
				</div>
			</li>
			<li>
				<img src="image.jpg">
				<div class="STRAND-text">
					<h1>Strand</h1>
					<hr>
					<h2>Text</h2>
				</div>
			</li>
		</ul>
		</div>
	</body>
</html>

我觉得它会使用某种位置标签，但是我尝试了一些不同的东西 - 没有用。基本上，我希望每个div都漂浮在图像的顶部，当它们悬停在它们上面时，它们会改变为放入css的任何样式。

Answer 1

将position: relative和float: left添加到<li>代码。
从float: left。

<img>

将top: 0添加到.STRAND-text

我个人会将第1步中的float: left更改为display: inline-block。但在这种情况下，您还需要确保</li>和下一个<li>之间没有空格，否则您将获得一些额外的空间（可能大约4px）。

.STRAND-container {
  /* Colour Strands Container */
  background-color: #333;
  /* Size of Strands Container */
  width: 1024px;
  height: 179px;
  /* Position Strands Container */
  margin: auto;
}
.STRAND-container img {
  /* Size of Strands */
  width: 159px;
  height: 159px;
  /* Space Boxes Properly */
  padding-top: 10px;
  padding-left: 10px;
  /* Layer Position */
  z-index: 1;
}
.STRAND-container ul,
li {
  /* Hide Bullet Points */
  list-style: none;
  /* Position Normally */
  margin: 0px;
  padding: 0px;
}
.STRAND-container li {
  position: relative;
  float: left;
}
.STRAND-text {
  width: 159px;
  height: 159px;
  position: absolute;
  background-color: #000;
  text-align: center;
  margin: 10px;
  top: 0;
}
.STRAND-text hr {
  width: 80%;
}
.STRAND-text:hover {
  background-color: #FF0000;
}

<html>

<head>
  <title>Title</title>
  <link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div class="STRAND-container">
    <ul>
      <li>
        <img src="image.jpg">
        <div class="STRAND-text">
          <h1>Strand</h1>
          <hr>
          <h2>Text</h2>
        </div>
      </li>
      <li>
        <img src="image.jpg">
        <div class="STRAND-text">

        </div>
      </li>
      <li>
        <img src="image.jpg">
        <div class="STRAND-text">
          <h1>Strand</h1>
          <hr>
          <h2>Text</h2>	
        </div>
      </li>
      <li>
        <img src="image.jpg">
        <div class="STRAND-text">
          <h1>Strand</h1>
          <hr>
          <h2>Text</h2>	
        </div>
      </li>
      <li>
        <img src="image.jpg">
        <div class="STRAND-text">
          <h1>Strand</h1>
          <hr>
          <h2>Text</h2>
        </div>
      </li>
      <li>
        <img src="image.jpg">
        <div class="STRAND-text">
          <h1>Strand</h1>
          <hr>
          <h2>Text</h2>
        </div>
      </li>
    </ul>
  </div>
</body>

</html>

水平定位DIV元素（CSS和HTML）

1 个答案: