Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS] width:100% + padding
varez
post
Post #1





Grupa: Zarejestrowani
Postów: 275
Pomógł: 32
Dołączył: 17.06.2007

Ostrzeżenie: (0%)
-----

Witam,
Mam sobie diva, którego szerokość będzię różna.
w środku chciałbym mieć inputa z max szerokością, ale z paddingiem

jak zrobimy:
input {
width: 100%;
padding: 3px 10px;
}

to input się robi dłuższy i wychodzi poza kontener.

jak to rozgryźć?
oczywiście nie zmieniająć box-sizing (czy jak tam szło to cudo z CSS3)
Go to the top of the page
+Quote Post
tehaha
post
Post #2





Grupa: Zarejestrowani
Postów: 1 748
Pomógł: 388
Dołączył: 21.08.2009
Skąd: Gdynia

Ostrzeżenie: (0%)
-----

jedyne rozwiązanie jakie przychodzi mi do głowy to wsadzić tego inputa w <p> z ustawionym padding-right, równy padding'owi inputa + border inputa
[PHP] pobierz, plaintext 
  1. <div id="middle" style="width:400px;">
  2.                 	<p style="padding-right:20px;"><input type="text" style="width: 100%;padding: 3px 10px;" /></p>
  3. </div>
[PHP] pobierz, plaintext


Ten post edytował tehaha 28.05.2010, 18:14:25
Go to the top of the page
+Quote Post
varez
post
Post #3





Grupa: Zarejestrowani
Postów: 275
Pomógł: 32
Dołączył: 17.06.2007

Ostrzeżenie: (0%)
-----

nie brzmi źle, oprócz tego, że z inputa taki akapit jak ze mnie papież (IMG:style_emoticons/default/tongue.gif)
Go to the top of the page
+Quote Post
tehaha
post
Post #4





Grupa: Zarejestrowani
Postów: 1 748
Pomógł: 388
Dołączył: 21.08.2009
Skąd: Gdynia

Ostrzeżenie: (0%)
-----

jaki akapit?
Go to the top of the page
+Quote Post
varez
post
Post #5





Grupa: Zarejestrowani
Postów: 275
Pomógł: 32
Dołączył: 17.06.2007

Ostrzeżenie: (0%)
-----

p = paragraph
Go to the top of the page
+Quote Post
mls
post
Post #6





Grupa: Zarejestrowani
Postów: 677
Pomógł: 89
Dołączył: 31.08.2003
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

Do styli CSS elementu INPUT należy dodać jeszcze:
[CSS] pobierz, plaintext 
  1. -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
[CSS] pobierz, plaintext

...aczkolwiek zadziała to tylko w nowszych przeglądarkach opartych o WebKit i Gecko...
Go to the top of the page
+Quote Post
varez
post
Post #7





Grupa: Zarejestrowani
Postów: 275
Pomógł: 32
Dołączył: 17.06.2007

Ostrzeżenie: (0%)
-----

Cytat(mls @ 28.05.2010, 20:58:45 ) *
Do styli CSS elementu INPUT należy dodać jeszcze:
[CSS] pobierz, plaintext 
  1. -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
[CSS] pobierz, plaintext

...aczkolwiek zadziała to tylko w nowszych przeglądarkach opartych o WebKit i Gecko...

no przecież napisalem ze box-sizing mnie nie interesuje.
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 23.08.2025 - 05:15
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn