Aumenta l'input HTML per riempire lo spazio nel contenitore

C'è un elemento <div id="MyDiv"> che viene ridimensionato in base alla larghezza della pagina. Contiene elementi <input> e <a>.Aumenta l'input HTML per riempire lo spazio nel contenitore

Come posso fare la <a> align dal lato destro del <div> e il tratto <input> per adattarsi allo spazio libero tra <div> 's lato sinistro e <a>' s lato destro?

Anche il <a> non deve passare alla riga successiva e ci sono anche definiti min-width e max-width sul contenitore. Ecco il codice:

<div id="MyDiv" style="background:#AAAAAA; width:100%; min-width:300px; max-width:600px;"> 
    <input type="text" id="MyInput"/> 
    <a id="MyButton" href="#">Button</a> 
</div>

e demo.

fonte

2013-03-08 va.

o yea ho dimenticato di dirvi di, cercare di non usare CSS in linea. –

-5

Basta aggiungere questo nel tuo tag <head>

input{width:92%;}

fonte

2013-03-08 09:32:48 Raj

Se si dice in 'head tag', quindi si dovrebbe inserire lo stile di input in' – Raj

migliore opzione è quella di utilizzare jQuery per calcolare la larghezza. Prova questo:

$(window).bind("resize", function(){ 
    fitInput(); 
}); 
//resize on window change 

$(document).ready(function(){ 
    fitInput(); 
}); 
//resize after loading 

function fitInput(){ 
    var divW = $("#MyDiv").width(); 
    var buttonW = $("#MyButton").width(); 
    $("#MyInput").width(divW - buttonW - 10); 
} 
//resize function

Fiddle: http://jsfiddle.net/Burnacid/aGHqV/4/

fonte

2013-03-08 09:37:18

Grazie, questo è esattamente ciò di cui avevo bisogno. Inoltre mi piacerebbe sapere se è possibile anche con html e css solo? –

Non che io sappia. sarai sempre leggermente fuori. non so se il CSS 3 ha aggiunto qualcosa per questo però. –

Se è esattamente ciò di cui avevi bisogno, dovresti segnare la sua risposta.Ho trovato utile anche questa risposta. –

-1

provare questo html:

<div id="MyDiv" style="background:#AAAAAA; width:100%; min-width:300px; max-width:600px;"> 

     <input type="text" id="MyInput" style="width:74%;float:left"/> 

     <a id="MyButton" href="#" style="width:24%;float:right">Button</a> 

    </div>

fonte

2013-03-08 09:43:41

È possibile utilizzare il posizionamento assoluto:

<!DOCTYPE html> 
<html> 
    <head> 
    </head> 
    <body> 
      <div id="MyDiv" style="position:relative;background:#AAAAAA; min-width:300px; max-width:600px;padding:0px 2px"> 
       <input type="text" id="MyInput" style="padding:0px;margin:0px;border:0px;width:100%;"/> 
       <a id="MyButton" href="#" style="position:absolute;right:0px;top:0;padding:0px 2px; background:#aaa;">Button</a> 
      </div> 
     <body> 
</html>

http://jsfiddle.net/uPZcW/

fonte

2013-03-08 10:13:16 ErDmKo

Getta via il css plz in linea. è un bel sollution al punto in cui l'input è riempito al 100%. Poiché si sovrappone il pulsante ontop del testo di input si riduce –

"il testo si interrompe" - in ogni caso, se il testo è superiore alla lunghezza del campo. – ErDmKo

Questo può essere fatto facilmente con CSS3 anche se non funzionerà in IE9 o sotto. IE10 è la prima versione di Internet Explorer a supportare lo standard. Gli altri browser already support le proprietà tramite regole prefissate o non prefissate.

See demo, che è solo Webkit ma è possibile aggiungere gli altri prefissi del fornitore del browser per le regole Flexible Box per abilitare il supporto per Firefox e Opera.

CSS

div { 
    background:#aaa; 
    width:100%; 
    min-width:300px; 
    max-width:600px; 
    display: -webkit-flex; 
} 

input { 
    -webkit-flex: 1; 
} 

a { 
    margin:0 10px; 
}

HTML

<div> 
    <input type="text"/> 
    <a href="#">Button</a> 
</div>

fonte

2013-03-08 10:20:44 andyb

Sebbene i CSS 3 avessero qualcosa, ty. Un'altra cosa nuova appreso –

L'input non si estenderà sui motori di webkit come Safari o dispositivi mobili. Dovrai metterlo in un elemento di blocco (come un div) o renderlo visualizzato: blocco stesso per ottenere il risultato previsto. – Javarome

Aumenta l'input HTML per riempire lo spazio nel contenitore

risposta

Problemi correlati