在列表项目菜单链接上显示图像(Display Images Over List Item Menu Links)
我需要一个跨浏览器的解决方案,让列表项菜单链接图像。 我正在使用默认的ASP.NET MVC 4模板,我有以下生成的HTML:
<ul id="menu"> <li> <a href="/Home/Item01"> <img src='/Images/MenuItem01.gif'/> Menu Item 01 </a> </li> <li> <a href="/Home/Item02"> <img src='/Images/MenuItem02.gif'/> Menu Item 02 </a> </li> <li> <a href="/Home/Item03"> <img src='/Images/MenuItem03.gif'/> Menu Item 03 </a> </li> </ul>CSS:
ul#menu { font-size: 1.3em; font-weight: 600; margin: 0 0 5px; padding: 0; text-align: left; } ul#menu li { display: inline; list-style: none; padding-left: 15px; } ul#menu li a { background: none; color: #999; text-decoration: none; } ul#menu li a:hover { color: #333; text-decoration: none; }这是一个小提琴: http : //jsfiddle.net/EY3ad/
我想将每个图像放在文本上方并集中。 多年来我没有做过纯HTML和CSS,所以任何帮助都会受到赞赏。 :)
I need a cross-browser solution for having list item menu links with images. I'm using the default ASP.NET MVC 4 template and I have the following generated HTML:
<ul id="menu"> <li> <a href="/Home/Item01"> <img src='/Images/MenuItem01.gif'/> Menu Item 01 </a> </li> <li> <a href="/Home/Item02"> <img src='/Images/MenuItem02.gif'/> Menu Item 02 </a> </li> <li> <a href="/Home/Item03"> <img src='/Images/MenuItem03.gif'/> Menu Item 03 </a> </li> </ul>The CSS:
ul#menu { font-size: 1.3em; font-weight: 600; margin: 0 0 5px; padding: 0; text-align: left; } ul#menu li { display: inline; list-style: none; padding-left: 15px; } ul#menu li a { background: none; color: #999; text-decoration: none; } ul#menu li a:hover { color: #333; text-decoration: none; }Here's a Fiddle: http://jsfiddle.net/EY3ad/
I'd like to have each image above the text and centralized. I haven't done pure HTML and CSS in years so any help would be appreciated. :)
最满意答案
你在找这样的东西吗?
HTML:
<ul id="menu"> <li> <a href="/Home/Item01"> <img src='http://lorempixel.com/48/48'/> <span>Menu Item 01</span> </a> </li> <li> <a href="/Home/Item02"> <img src='http://lorempixel.com/48/48'/> <span>Menu Item 02</span> </a> </li> <li> <a href="/Home/Item03"> <img src='http://lorempixel.com/48/48'/> <span>Menu Item 03</span> </a> </li> </ul>CSS:
ul#menu { font-size: 1.3em; font-weight: 600; margin: 0 0 5px; padding: 0; text-align: left; } ul#menu li { display: inline-block; list-style: none; padding-left: 15px; } ul#menu li a { background: none; color: #999; text-decoration: none; position:relative; } ul#menu li a:hover { color: #333; text-decoration: none; } ul#menu li a img { display:block; margin:auto; } ul#menu li a span{position:absolute; top:0; text-align:center;}Are you looking for something like this?
The HTML:
<ul id="menu"> <li> <a href="/Home/Item01"> <img src='http://lorempixel.com/48/48'/> <span>Menu Item 01</span> </a> </li> <li> <a href="/Home/Item02"> <img src='http://lorempixel.com/48/48'/> <span>Menu Item 02</span> </a> </li> <li> <a href="/Home/Item03"> <img src='http://lorempixel.com/48/48'/> <span>Menu Item 03</span> </a> </li> </ul>The CSS:
ul#menu { font-size: 1.3em; font-weight: 600; margin: 0 0 5px; padding: 0; text-align: left; } ul#menu li { display: inline-block; list-style: none; padding-left: 15px; } ul#menu li a { background: none; color: #999; text-decoration: none; position:relative; } ul#menu li a:hover { color: #333; text-decoration: none; } ul#menu li a img { display:block; margin:auto; } ul#menu li a span{position:absolute; top:0; text-align:center;}
更多推荐
发布评论