Question

我有两个像这样生成的图像链接，这是HTML

<ul>
    <li><a class="BigLinks" href="My_Name.pdf" id="Resume" style="position: absolute; top: 264px;!important left: 17px; !important color: #0005FF"></a></li>
     <li><a class="BigLinks" href="espn.com" id="Personal_Projects" style="position:absolute; top: 51em; left: 49em; color: #0005FF"></a></li>
   </ul>
</div>

这是CSS代码..

#Resume{
background-image: url(Resume_Button.png);
display: block;
border: .25em solid #FF0004;
height: 300px;
overflow: hidden;
text-indent: 200%; For Removing the hyperlink (Not Clean)  
white-space:nowrap;
width: 509px;
padding-top: 5em;
padding-bottom: 5em;

}

#Resume:hover{
display:block;
border: 1em solid #FF0004;
height:15em;
overflow:hidden;
text-indent:200%;  For Removing the hyperlink (Not Clean) 
white-space:nowrap;
width:31em;
padding-top:5em;
padding-bottom:5em;
}

#Personal_Projects{
background-image:url(android-logo2.png);
display: block;
border: 0.25em solid #FF0004;
height:15em;
overflow:hidden;
text-indent:200%;  For Removing the hyperlink (Not Clean) 
white-space:nowrap;
width:31em;
padding-top:5em;
padding-bottom:5em;



}

#Personal_Projects:hover{
display: block;
border:1em solid #FF0004;
height:15em
overflow:hidden;
text-indent:200%
white-space:nowrap;
width:31em;


}

我的问题是，无论屏幕大小如何，我都希望两个按钮不在最佳位置。 AKA我想图像位置响应没有硬编码。通过我现在编码的方式，它在我的笔记本电脑屏幕上看起来很糟糕，但不在我的大屏幕上。

Answer 1

那里有一些问题。不是100％清楚你要问的是什么，而是摆脱了这个位置：style属性中的绝对声明会将你的链接重新引入到文档流中。

其次，如果你混合使用px和ems，你将很难获得好的结果。两个人总是很好地在一起玩。

另外，你想用text-indent / white-space / overflow声明做什么？

相对/响应图像-HTML -CSS

1 个答案: