Diciamo che ho una casella di testo che voglio riempire un'intera riga. Gli darei uno stile come questo:
input.wide {display:block; width: 100%}Ciò causa problemi perché la larghezza si basa sul contenuto della casella di testo. Le caselle di testo hanno margine, bordi e riempimento per impostazione predefinita, il che rende una casella di testo con larghezza del 100% più grande del suo contenitore.
Ad esempio, qui a destra:
C'è un modo per fare in modo che una casella di testo riempia la larghezza del suo contenitore senza espandersi oltre?
Ecco alcuni esempi di HTML per mostrare cosa intendo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<style type="text/css">
#outer{border: 1px solid #000; width: 320px; margin: 0px;padding:0px}
#inner{margin: 20px; padding: 20px; background: #999;border: 1px solid #000;}
input.wide {display:block; margin: 0px}
input.normal {display:block; float: right}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
<input type="text" class="wide" />
<input type="text" class="normal" />
<div style="clear:both;"></div>
</div>
</div>
</body>
</html>Se questo viene eseguito, puoi vedere guardando la casella di testo "normale" che la casella di testo "larga" sporge oltre il contenitore. La casella di testo "normale" si sposta sul bordo effettivo del contenitore. Sto cercando di fare in modo che la casella di testo "largo" riempia il suo contenitore, senza espandersi oltre il bordo come la casella di testo "normale".