Jump to content
  • 0

Правильное выравнивание поля с кнопкой

IndigoHollow

Asked by IndigoHollow,

 Share

Question

IndigoHollow Explorer

IndigoHollow

Posted
Posted

Дело вот в чем. С помощью такого кода добавил в горизонтальное меню своего сайта форму поиска:


function menu_search($items){
$search = '<li class="search">';
$search .= '<form method="get" id="searchform" action="/">';
$search .= '<nobr><input type="text" class="field" name="s" id="s" placeholder="Search..." />';
$search .= '<input type="submit" class="submit" name="submit" id="searchsubmit" value="Go" /></nobr>';
$search .= '</form>';
$search .= '</li>';
return $items . $search;
}
add_filter('wp_nav_menu_items','menu_search');

Получилось так:

s1.jpg

Т.е. как бы форма поиска стала очередным пунктом меню. Захотел я сделать красиво и выровнять эту форму вместе с кнопкой по правому краю. Сделать это мне не удалось и я решил прописать для input параметр margin-left:


input {
vertical-align: middle;
margin-top: 7px;
margin-left: 300px;
}

Получилось вот так:

s2.jpg

Т.е. сначала форма ввода отступила от левого края 300px, а потом и кнопка. Подумал я и дописал position:


input {
vertical-align: middle;
margin-top: 7px;
position: absolute;
margin-left: 300px;
}

Получилось так:

s3.jpg

Вопрос: что мне надо сделать, что бы кнопка шла аккурат за формой ввода?

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0
Alarr Explorer

Alarr

Posted
Posted (edited)

А попробуйте написать те же стили, что и в начале, только с небольшим уточнением:


input[type="text"] {
vertical-align: middle;
margin-top: 7px;
margin-left: 300px;
}

А вообще, лучше бы даже было воздействовать на родительский блок этих двух инпутов, если такой конечно имеется.

Edited by Alarr
Link to comment
Share on other sites
  • 0
IndigoHollow Explorer

IndigoHollow

Posted
  • Author
Posted

А попробуйте написать те же стили, что и в начале, только с небольшим уточнением:


input[type="text"] {
vertical-align: middle;
margin-top: 7px;
margin-left: 300px;
}

А вообще, лучше бы даже было воздействовать на родительский блок этих двух инпутов, если такой конечно имеется.

Спасибо, добрый человек! Помогло!

Вопрос2: Если указать для input метку (текст, который в нем изначально появляется) на кириллице, то она отображается краказябрами:


$search .= '<nobr><input type="text" class="field" name="s" id="s" placeholder="Поиск..." />';
$search .= '<input type="submit" class="submit" name="submit" id="searchsubmit" value="Искать" /></nobr>';

s5.jpg

Где надо изменить кодировку, что бы это исправить?

Link to comment
Share on other sites
  • 0
IndigoHollow Explorer

IndigoHollow

Posted
  • Author
Posted

Нашел другое решение. Дописал одну специальную строку и получилось:


$search .= '<nobr><input type="text" class="field" name="s" id="s" placeholder="ПОИСК..." />';
$search .= '<input type="submit" class="submit" name="submit" id="searchsubmit" value="GO!" /></nobr>';
$search = mb_convert_encoding($search, "UTF-8", "cp1251");
return $items . $search;

Link to comment
Share on other sites
  • 0
rus Explorer

rus

Posted
Posted

скорее всего получилось так что, вы открыли файл, который был скажем в кодировке win-1251 редактором, в котором при открытии документа стоит значение открывать документы в кодировке скажем utf-8, либо сохранили в отличной от начальной кодировке - отсюда и кракозябры ваши.

либо открывайте и сохраняйте в одной и той же кодировке, либо перекодируйте файл в нужную кодировку.

Link to comment
Share on other sites
  • 0
Alarr Explorer

Alarr

Posted
Posted

Нашел другое решение. Дописал одну специальную строку и получилось:

Вот и хорошо:) Но на всякий, можно ещё и прописать кодировку:


<!DOCTYPE html>
<meta charset="utf-8">

Как минимум потому что так советует гугл, и вообще так будет меньше мороки:)

Specify the encoding in HTML templates and documents via <meta charset="utf-8">.

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

    • Kasl68
      Как передать значение из поля в поле?
      By Kasl68
      Не могу значение с одного поле на другой, через  JavaScript. Помогите пожалуйста!
      <!DOCTYPE HTML> <html lang="kz"> <head>     <meta charset="utf-8"> <title> ВЫВОД </title> </head> <body>    <input type="text" name="Vvod" value="Пример" placeholder="введите имя"> <input type="text" name="Vyvod"> <br> <input type="submit"></button> <br> <script type="text/javascript">     function submit() {     let Vvod=document.getElementsByTagName('Vvod');     Vyvod.value=Vvod;     console.log(Vyvod.value);     } </script>   </body> </html>  
    • RaiderCoder
      Проблема при верстке кнопки
      By RaiderCoder
      Здравствуйте , сделал макет сайта для интернет магазина . Но столкнулся с проблемой при верстке кнопок на главной странице и не нашел информации как можно уместить текст + несколько картинок в одну кнопку. Знает кто решение и реалезуемо оно вообще ?

    • Alex777-777
      Создать кастомную кнопку
      By Alex777-777
      Все привет.
      Использую bootstrap 3, хотя это наверно и не существенно. Необходимо сделать, чтобы у активных кнопок внизу был указатель, как на картинке. Кнопка любого цвета с любой границей, с иконками и текстом. Но проблема именно с треугольником внизу у активной кнопки.

      Не знаю, как к этому подступиться. Толкните в нужном направлении, спасибо.
       
    • Progrmergr
      Как изъять текст из <button>
      By Progrmergr
      <button class="but" onclick="tap">Пельмени</button> Как я могу в JS получить слово "Пельмени"?
    • Bourdun
      Авторизация и Регистрация
      By Bourdun
      Появился вопрос на который я так и не смог найти ответа. Нужно создать регистрацию и авторизацию с базой данных и я не понимаю как подключить php файл к html? В остальном попытаюсь разобраться сам
×
×
  • 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