HTML/CSS-те нәрсеге ортақтасу

Менің ойымша, проблема туындауы мүмкін, бұл мәселе болып табыла ма, өйткені мен оны ұзақ уақыт бойы қарап жатырмын, оның ортасында немесе жоқ екенін білмеймін.

http://jamessuske.com/thornwood/gallery.php

Мен не істеуге тырыссам, бүкіл галереяны орталыққа айналдырып жатырмын, маған ол оң жаққа ұқсас. Егер кез-келген адам мұны түсінуге көмектесе алса, бұл жақсы болар еді. Жетілдірілген рахмет.

CSS КОДЕКСІ

.contentTextGallery{
padding:20px 0 0 0;
width:866px;
font-size:16px;
float:left;
}

.gallery{
 width:912px;
 margin-top:6px;
}

.gallery ul{
 list-style-type:none;
 text-align:center;
}

.gallery li{
 display: inline-block;
}

* html .gallery li { /* IE6 */
  display: inline;
}

*:first-child + html .gallery li { /* IE7 */
  display: inline;
}

.gallery ul a {
 display:block;
 text-decoration: none;
 color:#FFF;
 padding:5px 0 0 5px;
}
0
Сізге қандай браузер қиындықтар тудырады? Хромда жақсы көрінеді
қосылды автор Madara Uchiha, көзі
Опсай - сен не айтқанын түсінбедің. Мен сол қораптың ішінде суреттер галереясы дегенді білдірмей, ортадағы үлкен қорапты білдіреді деп ойладым. @fixlr дұрыс - тізімдегі толтырғышты алып тастау керек. Сіз түсіндірді.
қосылды автор Nightfirecat, көзі
бұл орталық емес
қосылды автор Joseph Marikle, көзі

4 жауаптар

Графиктегі элементке сол жақшаны алып тастау қажет сияқты.

.gallery ul { padding-left: 0px; }

Пайдаланып отырған веб-браузерге байланысты әдетте тізімдерде әдепкі толтыру бар.

3
қосылды

Update: Oh, I see what you are trying to fix now, the stuff inside the container:

Сізге бар керегі

.gallery ul {
  padding: 0;
}

Original:

Сізге XScope сияқты құрал табу керек: http://iconfactory.com/software/xscope . Бұл дизайны үшін құралдар бар (басқарушылар, бағыттаушылар, браузер өлшемінің рамалары және т.б.). Әкімші экраныңызда пикселдерді өлшегендіктен, сізге бұл көмектесуі мүмкін. Орналасуыңыздың әр жағында қанша пиксель бар екенін жылдам өлшей аласыз.

Also here is something similar but a little less elegant: http://www.arulerforwindows.com/

1
қосылды
Бұл емес . Жақсы жаңарту, дегенмен.
қосылды автор Bojangles, көзі
Енді менің пікірімдегі екінші сөйлем. Мен скриншотты алдым, сондықтан оны кез-келгенде жіберуді шештім :-P
қосылды автор Bojangles, көзі
Мен істедім. Ол әрқайсысының ең төмен өкілі және дұрыс жауапты орналастырды. +1 сізге осы құралдарды ұсыну үшін.
қосылды автор Bojangles, көзі
Тек сайттың өзі емес, сайттың мазмұны туралы сөйлескенін түсіндім. Бұл қатені түзету үшін қарапайым шешіммен жаңартыңыз.
қосылды автор nheinrich, көзі
:) Дауыс берілді, ол не болып жатқанын түсінді.
қосылды автор nheinrich, көзі

Бұл орталықтандырылған емес. (Қазір үш адам оның ортасында екенін айтады, бірақ мен олардың неге қарап отырғанын білмеймін ...)

Сіз суреттер тізімін пайдаланасыз және ол әдепкі бойынша сол жақта толтырады.

Сіз олардың арасындағы бос орынды алу үшін сілтемелерде толтырғышты пайдаланасыз, бірақ сіз сол жақ пен үстіңгі жақта ғана толтырасыз, сол үшін сол жаққа қосымша бос орын қосасыз.

Тізімде сол жақшаны нөлге орнатыңыз:

.gallery ul{
  list-style-type:none;
  text-align:center;
  padding-left: 0;
}

Тікелей сілтемелерде сол және оң жақтауын жасаңыз:

.gallery ul a {
  display:block;
  text-decoration: none;
  color:#FFF;
  padding:5px 2px 0 3px;
}
0
қосылды
көп рақмет. тамаша көрінеді!
қосылды автор user979331, көзі

Сіз дұрыс, ол орталықтандырылған емес.

Менің ойымша, бірақ сенімді емес, ол толтырғыш мәселе болуы мүмкін, сіз контейнердегі жұп элементтеріне бірдей емес, сол жақта толтырғышты қойдыңыз.

барлық сол жақшаны 0px (немесе сол және оң жақта бірдей толтырғышты пайдаланыңыз) бұл сияқты - толтыру: 5px 5px; немесе әрбір суретде 0 толтырғыш және тең маржа болуы мүмкін: 5px 5px;

0
қосылды