HTML - Styling a input type=submit as an anchor and removing extra space rendered
I have the following HTML and you can see the extra space between the links when the page renders.
开发者_如何学JAVAHow do trim this space?
EDIT: This seems to be an IE problem.
<div class="navLinks" style="text-align:right;margin-bottom:30px;">
<form action="/Invoice/SetPaid" method="post"><input id="id" name="id" type="hidden" value="11356" />
<input type="submit" value="Set To Paid" />
</form><form action="/Invoice/WorkInProgress" method="post"><input id="id" name="id" type="hidden" value="11356" />
<input type="submit" value="Set To Work In Progress" />
</form><form action="/Invoice/PrintVersion/11356" method="post"><input id="id" name="id" type="hidden" value="11356" />
<input type="submit" value="Printable Version" />
</form><form action="/Home/User" method="post"><input id="id" name="id" type="hidden" value="11356" />
<input type="submit" value="Continue" />
</form>
</div>
.navLinks form
{
display:inline;
}
.navLinks input
{
text-decoration:underline;
background-color:white;
color: #034af3;
border: 0px none;
text-align:center;
}
.navLinks input:hover
{
text-decoration:none;
}
.navLinks input
{
text-decoration:underline;
background-color:white;
color: #034af3;
border: 0px none;
text-align:center;
padding: 0px 6px;
/* Fixes extra padding issue in IE */
width:auto;
overflow:visible;
}
Use like this,
<div class="navLinks" style="text-align:right;margin-bottom:30px;"><form action="/Invoice/SetPaid" method="post"><input id="id" name="id" type="hidden" value="11356" /><input type="submit" value="Set To Paid" /></form><form action="/Invoice/WorkInProgress" method="post"><input id="id" name="id" type="hidden" value="11356" /><input type="submit" value="Set To Work In Progress" /></form><form action="/Invoice/PrintVersion/11356" method="post"><input id="id" name="id" type="hidden" value="11356" /><input type="submit" value="Printable Version" /></form><form action="/Home/User" method="post"><input id="id" name="id" type="hidden" value="11356" /><input type="submit" value="Continue" /></form></div>
For style,
.navLinks form
{
display:inline;
}
.navLinks input
{
text-decoration:underline;
background-color:white;
color: #034af3;
border: 0px none;
text-align:center;
cursor:pointer;
padding:0px;
}
.navLinks input:hover
{
text-decoration:none;
cursor:pointer;
}
精彩评论