Jump to content
  • 0

Select & Number (выравнивание по горизонтали, кроссбраузерность)

motion

Asked by motion,

 Share

Question

motion Explorer

motion

Posted
Posted (edited)

Добрый день.

 

Помогите, пожайлуста, советом.

 

Хотелось бы чтобы выглядело вот так.

 

В Firefox так и выглядит. А вот в других  браузерах (Opera, Chrome) - вот так

 

1. Выравнивание select`а не по центру. Пробовал через padding, но тогда все "элементы выбора" select`а сдвигаются на фиксированное количество пикселей. А они имеют разную длину. И получается один по центру, а остальные со сдвигом вправо (в зависимости от длины).

2. Число в поле number отображается не четко по центру, а со сдвигом влево. Если наводишь на само поле - справа появляется стрелочки и тогда вроде по центру. Но без наведения виглядит не эстетично. Может можно эти стрелочки как-то принудительно отображать, а не только при наведении.

 

Код:

<style>input { font-size:15px; text-align:center; width:195px;}select { font-size:15px; text-align:center; width:202px; padding: 1px;}</style><body><select name="terminal_type"><option value="unknown" >Не установлено</option><option value="entry" selected>Въездной</option><option value="exit">Выездной</option></select><input type="number" name="id_owner" value="1" maxlength="5" min="0" max="65535"></body>
Edited by motion
Link to comment
Share on other sites

21 answers to this question

Recommended Posts

  • 0
motion Explorer

motion

Posted
  • Author
Posted

В этом плагине нет выравнивания по центру внутри select`a

Да и установка дополнительного плагана не всегда будет возможна(не будет наличия доступа в интернет) да и неудобна.

 

 

Ещё какие существуют варианты?

 

 

А можно для каждого "option" select`a сделать разный padding? Сделать выравнивание по левому краю и для каждого пункта сделать индивидуальный отступ.

 

Для number пока вижу один вариант - сделать его обычным text`ом, но это в крайнем случае так как number позволяет ещё ограничивать нижнее и верхнее значение на стороне клиента.

Link to comment
Share on other sites
  • 0
motion Explorer

motion

Posted
  • Author
Posted

Для каждого option свой padding не работает. Пробовал и через id=, сlass=, <style></style>, style="" - ничего не работает. Только если для всего select`a сделать.

 

Но проблему решил очень просто. Сделал выравнивание по левому краю и с помощью пробелов ( ) сделал отступы для каждого option чтобы было по центру.

Link to comment
Share on other sites
  • 0
vlad360 Explorer

vlad360

Posted
Posted

Для каждого option свой padding не работает. Пробовал и через id=, сlass=, <style></style>, style="" - ничего не работает. Только если для всего select`a сделать.

 

Но проблему решил очень просто. Сделал выравнивание по левому краю и с помощью пробелов ( ) сделал отступы для каждого option чтобы было по центру.

Пробелы на разных разрешениях имеют разные размеры

Link to comment
Share on other sites
  • 0
motion Explorer

motion

Posted
  • Author
Posted

 

Вам уже сказали, кроссбраузерно, без js у вас не получится ничего.

Ну или у вас свое понятие слова кроссбарузерно..

Выравниевание по центру select`a я сделал путем отступов. Вместо элемента Number использовал элемент Text. В Firefox, Opera, Chrome - все корректно отображается (по центру). В IE не смотрел (не получилось установить). Чем не кроссбраузерно?

Link to comment
Share on other sites
  • 0
motion Explorer

motion

Posted
  • Author
Posted (edited)

Посмотрел все-таки в IE. Там выравнивание в select получилось не по центру.

 

Кодировку на странице установил 1251 с помощью <meta http-equiv="Content-Type" Content="text/html; charset=windows-1251" />. Все браузеры её определяют. Только IE не по центру отображает а левее. Как будто у    меньше шаг. НО, если выставить в IE другую кодировку (Центральноевропейскую (Windows) или Западноевропейскую (Windows))  - все корректно по центру.

 

Как быть?

Edited by motion
Link to comment
Share on other sites
  • 0
npofopr Trainee

npofopr

Posted
Posted

Если ты такой умный сам дописывай код на js, центрирование подразумевает сдвиг вправо а как ты его будешь вычислять твои проблемы

зачем даете совет, если не умете выслушивать критику?

Link to comment
Share on other sites
  • 0
motion Explorer

motion

Posted
  • Author
Posted

Дайте, пожалуйста, пример кроссбраузерного кода на JS.

 

Тот что дан выше - просто делает фиксированный padding в зависимости от ширины select`a

Скрипт должен ещё как-то учитывать ширину текста option`a и исходя из него пересчитывать padding.

Link to comment
Share on other sites
  • 0
motion Explorer

motion

Posted
  • Author
Posted (edited)

Все-таки получилось с помощью пробелов отцентрировать и в IE 8. Проблема была в том, что шрифт в IE  был другой, чем тот, который я указал в body {font-family: Arial;}. Дополнительно прописав в select {font 15px arial} - все корректно отцентрировалось.

 

Вроде кроссбраузерно получилось без JS.

 

Вопрос как реализовать подобное с помощью JS остается открытым.

Edited by motion
Link to comment
Share on other sites
  • 0
vlad360 Explorer

vlad360

Posted
Posted

 

Если ты такой умный сам дописывай код на js, центрирование подразумевает сдвиг вправо а как ты его будешь вычислять твои проблемы

зачем даете совет, если не умете выслушивать критику?

 

просто люди тратят на него время чисто из интузиазма, а тот в свою очередь даже подумать не хочет, любишь кататься люби и саночки возить

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Similar Content

    • Nerwoid
      Выравнивание блоков/элементов
      By Nerwoid
      Ребят всем привет! Я только начал изучать верстку по видео урокам на ютубе. У меня есть свой макет который я купил у дизайнера. Решил с него поучиться верстать. Подскажите как правильно сделать шапку сайта. У меня все выравнивания происходят с помощь отрицательных "margin".  Судя по урокам, везде делают это с помощью flex и тому подобное. Дизайн очень оказался сложным и там много проблем с фонами. Дайте пару советов и подсказок как продолжать дальше. Заранее спасибо ?
       
      Вот: макет:
      Мой сайт
       
    • Marina_dolya
      select обрезается буквы
      By Marina_dolya
      Добрый день. 
      Помогите решить проблемку. В chrom и Opera
      <select>
      <option>100g</option>
      </select>
      у g обрезаeтся хвостик. 
       
    • Wile E
      Проблема с тегом select
      By Wile E
      Здравствуйте, дорогие форумчане. Я - новичок самоучка, поэтому для вас проблема может быть не очень сложная.
      Мне нужно сделать выпадающий список, как на рисунке. Интересует меня то, как сделать такие оглавления, как на изображении ("по сторам", "по товару"), чтоб они не выпадали вместе с option. 
      Простите, если не совсем понятно и корректно выражаюсь!

    • AlexProf
      Выравнивание элементов
      By AlexProf
      Не получается разобраться, как работает свойство vertical-align. В таблицах работает, а для строчных элементов почему-то нет. Пытаюсь сделать вертикальное выравнивание, но текст не сдвигается
      <div style="height: 200px"><span style="vertical-align: middle">Текст</span></div> Как правильно устанавливать это свойство?
    • Raiz
      [Нужна помощь!] Проблема в CSS с выравниванием!
      By Raiz
      Добрый день!
      Может кто нибудь объяснить мне, не смышленому верстальщику-новичку, как мне выравнить текст по центру картинок?
      Я уже все перепробывал,но что то не клеится((
      на первом скрине я отразил суть проблемы, а на втором то, как это должно быть по макету!
      (я заменил одну картинку, т.к. это не особо важно, но сути это не меняет)
      в html я объединил это все (картинки\текст) в один див и дал ему класс.
      далее я дал класс всем текстовым материалам и ид для каждой картинки, дабы сделать более гибкую настройку, но все пошло не по плану.
       
      в CSS класс текста выглядит так:
      .contenttext {     display: inline-block;     font-family: 'Raleway', Arial, sans-serif;     margin-top: 60px;     font-weight: 500;     font-size: 130%; } Видимо задавать margin-top: 60px; вообще лишнее, по скольку вместе с текстом перемещаются и картинки. Парюсь уже битый час над этим.
      Если кто сможет, подскажите, что можно предпринять для разрешения проблемы.
       


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept