Rozciągnij pole tekstowe na całą szerokość strony z marginesem 5 pikseli

Tworzę prosty dokument HTML zawierający formularz, który zamierzam użyć jako zawartość panel w dodatku do przeglądarki Firefox. Obecnie dokument zawiera etykietę i pole tekstowe i chcę, aby rozciągała się ona na całą szerokość strony z marginesem 5 pikseli po każdej stronie. To mój kod:Rozciągnij pole tekstowe na całą szerokość strony z marginesem 5 pikseli

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
    <title>Phrase Indexer</title> 
    <style type="text/css" media="all"> 
    body { 
    font: 10pt arial, helvetica, sans-serif; 
    padding: 0; 
    margin: 5px; 
    position: fixed; 
    width: 100%; 
    } 
    div { 
    width: inherit 
    } 
    #phrase { 
    width: inherit; 
    } 
    </style> 

</head> 

<body> 

<div> 
<label for="phrase">Passphrase</label><br /> 
<input type="text" id="phrase" /> 
</div> 

</body> 

</html>

to przeważnie działa, z wyjątkiem tęsknię margines 5px po prawej stronie - pole tekstowe rozciąga prawo do krawędzi strony. Jak mogę to naprawić?

Here's a Fiddle of my problem.

Źródło

2013-04-03 Dan Stevens

Dodałem skrzypce, aby ludzie mogli zademonstrować ci swoje odpowiedzi. – Jeff

Pozycja 'stała'? Spróbuj tego: http://jsfiddle.net/bUq32/ – dfsq

@dfsq: Myślę, że twoje skrzypce to mają. Dlaczego nie zamieścić tego jako odpowiedzi? – Jeff

Można to zrobić w ten sposób:

body 
{ 
    font: 10pt arial, helvetica, sans-serif; 
} 

div 
{ 
    padding: 0.5em; 
} 

div > * 
{ 
    width: 100%; 
}

oto demo JS Bin: http://jsbin.com/utabul/1

Więcej na ten temat tutaj: Set CSS 100% Width Minus Padding And Margin

Źródło

2013-04-03 16:06:13

Ten jest jeszcze lepszy! Dzięki! –

Nie ma za co. Dowiedziałem się o tym już dziś! Dziękujemy za przesłanie pytania ... :) –

Należy spróbować w ten sposób:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
    <title>Phrase Indexer</title> 
    <style type="text/css" media="all"> 
    *{ 
     margin:0; 
     padding:0; 
    } 
    body { 
    } 
    div { 
    } 
    #phrase { 
    width: 100%; 
    margin:5px; 
    } 
    </style> 

</head> 

<body> 

<div> 
<label for="phrase">Passphrase</label><br /> 
<input type="text" id="phrase" /> 
</div> 

</body> 

</html>

Źródło

2013-04-03 15:51:53 csaron92

To jednak nie naprawia. Zamiast tego powoduje to przewinięcie strony w prawo. Tutaj jest w Fiddle: http://jsfiddle.net/NgXjW/1/ – Jeff

Tak, masz rację. Właściwy sposób: * {margin: 0; wypełnienie: 0; } div { wypełnienie: 0px 7px 0 5px; } #phrase { szerokość: 100%; } Wypełnienie 7px zamiast 5px wynika z obramowania pola wejściowego. – csaron92

Należy wypróbować box-rozmiaru. Właśnie dodałem margines do elementu div, który otacza elementy formularza, usuwa pozycję z treści i dodaje rozmiar pola do danych wejściowych.

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
-moz-box-sizing: border-box; /* Firefox, other Gecko */ 
box-sizing: border-box;   /* Opera/IE 8+ */ 


body { 
    font: 10pt arial, helvetica, sans-serif; 
    padding: 0; 
    margin:0; 
    /* position: fixed; */ 
} 
div { 
    display:block; 
    margin:5px; 
} 
#phrase { 
    width: 100%; 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
}

Źródło

2013-04-03 16:02:35

Twoje rozwiązanie wydaje się jak dotąd najbardziej eleganckie. Dzięki! –

Ustaw wyściółka ciało: 5px zamiast marginesu pozbyć się ustalonej pozycji i ustawić szerokość div na 100% zamiast na body - http://jsfiddle.net/xX8yA

body { 
font: 10pt arial, helvetica, sans-serif; 
padding: 5px; 
} 
div { 
width: 100%; 
} 
#phrase { 
width: inherit; 
}

Źródło

2013-04-03 16:10:31

Rozciągnij pole tekstowe na całą szerokość strony z marginesem 5 pikseli

Odpowiedz

Powiązane problemy