Question

我一直试图在图像上放置ul导航但没有成功。

<header>
   <img src="images/header3.jpg" alt="header">
   <ul>
      <a href="#"><li>Home</li></a>
      <a href="#"><li>Store</li></a>
      <a href="#"><li>About</li></a>
      <a href="#"><li>Contact</li></a>
   </ul>
</header>

我一直在搞乱不同的职位，比如固定（不是我在寻求它的工作）和绝对的。还尝试在css中添加图像，但最终没有任何好的结果。包括尝试将大多数标签更改为div，尝试使用不同的标签，如标题元素。

我正试图在图像顶部的右上角进行导航。

注意：为什么我在li之前使用标签只是因为悬停效果。

header img {
width:100%;
position:relative;
}

header ul {
position:absolute;

}

header li {
float:left;
list-style-type:none;
font-size:25px;
margin-left:2%;
color:black;
text-decoration:none;
border:1px solid black;
padding:0.5%;
}

http://imgur.com/a/CcmaL根据要求。

Answer 1

试试这个：

＆＃13;

div.wrapper{width:800px;height:500px;background-image: url("https://i.ytimg.com/vi/F2UFAV24QII/maxresdefault.jpg");}
div.bar{float:right;}

＆＃13;

<div class="wrapper"> 

<div class="bar"> 
<button>Home</button>
<button>About</button>
<button>Content</button>
</div>

＆＃13;

您需要使用CSS3的背景图像功能。

Answer 2

请在此处查看更新的代码： http://codepen.io/jasjain/pen/aBjEjg

header {
  position: relative;
}

header,
header img {
  width: 100%;
}

header ul {
  position: absolute;
  width: 99%;
  padding: 0;
  right: 1%;
  top: 1%;
  text-align: right;
}

header li {
 display: inline-block;
 list-style-type: none;
 font-size: 25px;
 margin-left: 2%;
 color: #fff;
 text-decoration: none;
 border: 1px solid #fff;
 padding: 1% 3%;
 text-align: center;
}

我添加了位置：实际;在标题上，而不是标题中的图像我还为UL添加了位置属性。

ul导航图像

2 个答案: