开发者

HTML - Styling a input type=submit as an anchor and removing extra space rendered

开发者 https://www.devze.com 2022-12-28 09:53 出处:网络
I have the following HTML and you can see the extra space between the links when the page renders.开发者_如何学JAVA

I have the following HTML and you can see the extra space between the links when the page renders.

开发者_如何学JAVA

How 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;
    }
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号