我很难找到一个有效的解决方案,以解决四舍五入的图像标签上的隐形填充。
我尝试在 a 标签上使用边框半径,包括div,但没有任何效果。
此外,如果有人可以帮我弄清楚如何垂直对齐图像......我们将非常感激。
HTML:
<div class="linksbar">
<div class="logo"><a href="http://google.com/"><img src="images/logo2.png"></a></div>
<div class="logo2"><a href="http://google.com/"><img src="images/logo.png"></a></div>
<div class="tabs">
<nav><ul style="min-width:90%;">
<li><a href="home.html"><img src="images/b_home.png"></a></li>
<li><a href="http://woolleytech.com/students/ingram/html/assignments.html"><img src="images/g_portfolio.png"></a></li>
<li><a href="https://www2.nwrdc.wa-k12.net/scripts/cgiip.exe/WService=wsedros71/fwemnu01.w"><img src="images/g_grades.png"></a></li>
<li><a href="http://swsdonline.com/"><img src="images/g_school.png"></a></li>
</ul></nav>
</div>
</div>
CSS:
body{
margin:0 !important;
overflow-y: scroll;
}
h2, h3, h4{
margin: 0;
}
.okbar{
width:100%;
background-color:black;
color:black;
height:25px;
min-width:90%;
}
.okbarlinks li{
list-style-type:none;
display:inline;
padding:0px 10px 0px 10px;
float:right;
}
.okbarul {
padding:3px;
}
.okbarlinks a{
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
text-decoration:none;
color:#8a8a8a;
padding:0px;
transition:all 1s ease;
-webkit-transition-delay:all .5s ease;
-moz-transition-delay:all .5s ease;
-ms-transition-delay:all .5s ease;
-o-transition-delay:all .5s ease;
position:static;
}
.okbarlinks a:hover{
color:#454545;
}
.whitestrip{
width:100%;
height:1px;
background-color:white;
color:white;
text-align:center;
}
.linksbar{
background: url('images/blacktabbar.jpg');
background-color:black;
width:100%;
height:102px;
}
.logo{
height:102px;
margin-left:5%;
width:68px;
background-repeat:no-repeat;
vertical-align:middle;
background-position: center center;
float:left;
display:block;
border-radius:15px;
}
.logo2{
height:102px;
width:200px;
padding-left:30px;
background-repeat:no-repeat;
vertical-align:middle;
background-position: center;
float:left;
display:block;
border-radius:15px;
}
.bluebody{
background: url('images/bluebar.jpg');
width:100%;
height:200px;
margin-top:1px;
padding:0;
}
.tabs ul{
margin:0;
}
.tabs li{
list-style-type:none;
display:inline;
min-width:90%;
}
.tabs a{
margin-left:10px;
text-decoration:none;
}
.tabs{
position:absolute;
text-align:center;
width:100%;
}
.bluebodyheaderfont{
font-size:22px;
font-family:'Helvetica Neue', Helvetica, Arial, 'lucida grande',tahoma,verdana,arial,sans-serif;
}