Question

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

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

Answer 1

.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;
}