css problem - 'post link'

Question

Hi,

I am no css expert so I am wondering whether someone could help. I have several forms to delete an item like this:

<form action="/Items/DeleteItem" class="deleteForm" method="post"> 
                    Some text
                                        <input id="Id" name="Id" value="14014" type="hidden">
                                        <input value="Delete" class="link_button" type="submit"> 
                                </form>

This should look like this:

Some text Delete

Here ‘Some text’ describes the item and Delete is a ‘link’ which performs a post request to delete the item (as virtually all browsers only support the post and get requests).

I have started to style things (CSS below) but the ‘Delete’ ‘link’ is still slightly offset in relation to ‘Some text’ (at least in firefox). I would appreciate any help with the css. Thanks!

.link_button
{
    background-color:white;
    border:0;
    color:#034af3;
    text-decoration:underline;
    font-size:1em;
    font-family:inherit;
    cursor:pointer;
    float:left;
    margin:0;
    padding:0;
}

.deleteForm
{
    float:right;
    margin:0;
    padding:0;
}

Christian

Answer 1

You might want to use a different display type for the submit button, rather than floating it. Making it inline will cause it to behave just like text. Here's an explanation of all the display values; the most significant are block, inline and inline-block.

And note that you may want to use a <button type="submit" class="link_button">Delete</button>, as it offers much more flexibility than the <input>.