CSS Упорядочить элементы Button (HTML)

У меня есть моя CSS и html-форма в этой ссылке. http://jsfiddle.net/qLgCX/1/ Как я могу сделать кнопку «Обновить» и «Сбросить» в той же строке на следующем выходе? Я использую тот же CSS для нескольких других html, которые содержат только 1 кнопку отправки. Я боюсь, что изменение css также повлияет на них. enter image description here CSS Упорядочить элементы Button (HTML)

enter image description here

#stylized button{ 
clear:both; 
margin-left:150px; 
width:125px; 
height:31px; 
background:#666666 url(img/button.png) no-repeat; 
text-align:center; 
line-height:31px; 
color:#FFFFFF; 
font-size:11px; 
font-weight:bold; 
}

источник

2013-05-21 Jill448

Вы должны обернуть каждую из своих строк в абзаце и не использовать '
'. Затем вы можете добавить класс '.contains-btn' к последнему и легко« text-align: center »его содержимое. И внутри него используется встроенный блок для каждой кнопки. Будет ли один или два из них не изменят их центрирование (если это желаемый стиль) EDIT: я не буду предлагать скрипку, потому что сайт не позволит мне скопировать клавиатурой или мышью HTML-код ... – FelipeAls

http://jsfiddle.net/qLgCX/10/

Это решение не будет влиять на ваши другие формы, как вы просили. Это требует некоторой модификации HTML, тем не менее, что, добавляя класс к кнопкам.

HTML, я изменил:

<button type="submit" class="custom-submit" >Update</button> 
<button type="reset" class="custom-reset">Reset</button>

CSS-я добавил:

#stylized button.custom-submit, #stylized button.custom-reset { 
    float: left; 
    clear: none; 
    margin-left: 50px; 
}

Или, если вы хотите более эффективно сделать это, вам нужно всего лишь один класс:

<button type="submit" class="UpdateReset" >Update</button> 
<button type="reset" class="UpdateReset">Reset</button>

И вы можно применять и CSS только один раз, без каких-либо родителей в селекторе:

.UpdateReset { 
    float: left; 
    clear: none; 
    margin-left: 50px; 
}

источник

2013-05-21 18:37:03 Michael

wow, используя имя тега в селекторах классов, объявляя один и тот же CSS дважды и используя 'float'. мне все равно, что вы не выбрали мой ответ, я обеспокоен тем, что эти неэффективные и архаичные привычки кодирования предоставляются в качестве ответов вообще. мы не можем просто предоставить ответы, которые работают, нам нужно дать хорошие ответы и научить людей правильно программировать. – PlantTheIdea

@PlantTheIdea - Float - вполне разумный способ сделать это. Ему также нужно было выполнить запрос, не нарушая его других форм, которые имеют только одну кнопку, и в этом случае ваше решение ломается. Он не может центрировать кнопки в том случае, если есть только одна кнопка, а не две. Следовательно, конкретные правила стиля для решения его очень конкретной проблемы. Учитывая, что у него есть несколько других форм, у которых есть только одна кнопка, и это единственная, у которой есть две, вышеописанное является вполне разумным решением, и если он так захочет, он может комбинировать селекторов. – Michael

И, откровенно говоря, выше это лучшее решение FAR, чем два других ответа ниже. (за исключением ваших). – Michael

вы можете попробовать дисплей: встроенный блок в CSS для кнопок. , если вы не намерены делать это на всех кнопках (т. Е.), Если вы хотите, чтобы кнопки только на этой особой странице были выровнены по горизонтали, затем введите идентификатор div, содержащий кнопки, а затем определите css как

#divid #stylizedbtn{ 
display:inline-block; 
}

Извините, я сначала не видел скрипку.

пожалуйста, попробуйте следующее: 1.Снимите
тегов после первой кнопки

<button style="display:inline-block" type="submit">Update</button> 
<button style="display:inline-block" type="reset">Reset</button><br><br>

изменить CSS для

#stylized button{ 
margin-left:50px; //some lesser value than 150px 
}

источник

2013-05-21 18:30:05 gaurav5430

Лично я клянусь inline-block. Мне также пришлось изменить margin-left и удалить <br> s, которые вы использовали. Вот обновленная версия:

http://jsfiddle.net/qLgCX/3/

Я мог бы провести неделю оптимизации его остальные (там намного проще и более расширяемые способы сделать то, что вы сделали), но это должно решить конкретный вопрос, не вторгаясь много на ваш существующий код.

источник

2013-05-21 18:30:28 PlantTheIdea

Вы можете попробовать добавить новый класс стиля:

.mybutton { margin-left:20px !important;}

и применить его к кнопкам

see my Fiddle update

<button type="submit" class="mybutton">Update</button> 
<button type="reset" class="mybutton">Reset</button><br><br>

(Я также удалил теги разрыва строки и после отправки)

источник

2013-05-21 18:46:43

Это не помещает кнопки в одну строку. – Michael

Извините, у моего сохраненного «jsFiddle» не было класса = «mybutton», примененного к Reset. Если вы добавите эту часть в код, она должна работать. (Http://jsfiddle.net/qLgCX/14/) –

CSS Упорядочить элементы Button (HTML)

ответ

Смежные вопросы