ul导航图像

我一直在尝试将ul导航放在图像上，但没有成功。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，尝试使用标题元素等不同标签。

我想让导航在图像右上角ontop。

注意：为什么我在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根据要求。

来源

2016-12-10 Unkn0wn

在截图中解释。你想说什么？为什么最高权利？您将始终导航到图像的左上角，即图像开始的位置。 – Deadpool

我看不到你的'ul'标签。 :( –

他很困惑，在他想实现的目标中。 – Deadpool

试试这个：

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

<div class="wrapper"> 
 

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

您需要使用CSS3的背景图像特征。

来源

2016-12-10 03:05:36 Deadpool

Weeell好像还没有完全理解我的意思我想要放置导航栏在右上角，不要带你去那里。这里是一个更专业的形象https://imgur.com/a/suNdy希望清楚的事情。 – Unkn0wn

看看更新的答案。现在，不要说，你 – Deadpool

这正是我想要的，你终于得到了我，因为我的油漆技巧，它似乎.. 但是我刚刚解决它自己，所有想法用不同的方式，位置绝对没有实际上工作如果我因为某种原因移动了我的ul标签它放在我的img标签之前。 http://codepen.io/Unkn0wn96/pen/pNZdqP结果，所以是的，你在最后确定了它的确很好。 – Unkn0wn

请点击这里更新的代码： 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; 
}

我已经加入位置：realtive;在标题上，而不是标题中的图像。
我还为UL增加了位置属性。

来源

2016-12-10 06:48:06

回答

相关问题