Come posso rimuovere completamente il margine delle caselle di testo in HTML / CSS

StackOverflow https://stackoverflow.com/questions/413573

  •  03-07-2019
  •  | 
  •  

Domanda

Ho il seguente HTML 

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <style>
    .box
    {
        border:solid black 1px;
        padding:0px;
        margin:0px;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <input class="box" style="width:300px;" /><br />
        <input class="box" style="width:150px;" />
        <input class="box" style="width:150px;" /><br />
        <input class="box" style="width:100px;" />
        <input class="box" style="width:100px;" />
        <input class="box" style="width:100px;" />
    </form>
</body>
</html>

L'idea è che le caselle di testo dovrebbero finire pixel perfetti sul lato destro.

Alla fine aggiungerò la spaziatura sulle righe 2 e 3 ingrandendo le larghezze per compensare, ma per il momento vorrei ottenere questo semplice campione per il rendering.

Quindi come posso rimuovere i margini di queste caselle di testo in modo che l'allineamento sia corretto?

È stato utile?

Soluzione

Non si allineano a causa dello spazio tra loro.

Se dovessi rimuovere tutte le nuove righe e schede tra gli <input> elementi, verrebbe visualizzato come desideri.

Altri suggerimenti

Ho scoperto che l'aggiunta di float: left; a .box ha fatto ciò che volevi. 

.box {
    padding:0px;
    margin:0px;
    float: left;
}

Stai parlando del giusto che giustifica tutte le caselle di testo?

In tal caso, questa non è una domanda di margine. Questo è semplicemente mettere le caselle di testo in un elemento contenente. Forse a e quindi impostare il text-align: right; stile CSS sul div.

Il bordo non è incluso nella larghezza, quindi una scatola con un bordo 1px e una larghezza di 150px sarà effettivamente larga 152 px.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top