Выравнивание изображения вправо в css / bootstrap
У меня есть снимок экрана, показанный ниже, который я пытаюсь воспроизвести в HTML, CSS и JS.
The screenshot should remain the same both for mobile and desktop version.
В данный момент я работаю над тремя точками (отмеченными на изображении выше), выровненными вправо.
Я создал для него рабочий пример с кодами HTML и CSS. Я создал изображение для трех точек. Код, который я использовал для выравнивания изображения с тремя точками вправо:
HTML:
<div class = "nav-top-searchbar">
<form>
<span class = "fa fa-search searchicon" aria-hidden = "true"></span>
<input type = "text" name = "search">
<img src = "https://s9.postimg.org/d6s4xvykv/Ellipsis.png" id = "ellipsis">
</form>
</div>
CSS:
#ellipsis {
top: -30px;
position: relative;
left: 1320px;
}
Постановка задачи:
Проблема в рабочий пример возникает, когда я вижу веб-страницу в мобильной версии, it is creating a white space all the way towards the right. Мне интересно, какие изменения мне нужно внести в приведенный выше код CSS / HTML, чтобы я не видел пробелов справа.
Ответы 4
Я бы поместил этот элемент прямо с float: right;
Я бы посоветовал вам поместить изображение в контейнер div, но попробуйте это
ellipsis {
top: -30px; position: absolute ; right:0; }
Тем не менее остается пустое пространство. Можете ли вы предоставить для этого скрипку?
Имеет ли содержащий div относительное положение ?? Я про класс nav-top-searchbar ??
Нет. Я включил все коды CSS, относящиеся к этому div.
Должен ли этот div иметь положение относительно или снизу?
Попробуйте это поместить и диапазон, и поле ввода в один div и поместить изображение в отдельный div. Создайте класс для обоих div. В обоих классах добавьте отображение встроенного блока, затем в первом div, содержащем как диапазон, так и текстовый ввод, установите свойство float влево.
Нет, просто попробуйте то, что я только что отправил, дайте мне знать, как далеко. Помните два отдельных div.
Согласно вашему комментарию, это то, что я сделал в HTML: <div class = "nav-top-searchbar"> <div class = "searchicon"> <form> <span class = "fa fa-search" aria-hidden = "true"></span> <input type = "text" name = "search"> </form> </div> <div class=ellipsis> <img src = "/assets/images/Ellipsis.png"> </div> </div> Вы можете написать CSS? Мне трудно это понять.
Позвольте нам продолжить обсуждение в чате.
Вы хотите, чтобы я использовал этот HTML-код?
Позвольте нам продолжить обсуждение в чате.
CSS:
#ellipsis {
top: -30px;
position: absolute;
right:0;
}
Я все еще вижу пробелы, используя ваш код. Можете ли вы предоставить для этого скрипку?
Если вы видите в полноэкранном режиме, изображение из трех точек не там, где оно должно быть. Кроме того, в мобильном представлении я вижу белое пространство справа.
Вам следует сделать следующее:
1) Сам #ellipsis
#ellipsis {
top: 12px; // Sounds good and a bit centered [ Vertically ]
position: absolute;
right: 20px; // Increase or decrease it depends on your UI needs
}
Почему я здесь переоделся?
topот отрицательного к положительному.positionотrelativeкabsolute, как мы дали бы позициюrelativeсамому<input>. Потому что мы должны быть завернуты внутрь него. Если вас смущаютrelativeиabsolute, взгляните на этот ответ.- Вместо
left: 1320px;мы использовалиright, чтобы вставить его справа
2) Контейнер #ellipsis / .nav-top-searchbar
.nav-top-searchbar {
position: relative;
}
Your code might work fine without adding this, but I highly recommend you adding this to avoid any styling issues now or even later. Some browsers might run it fine - As it works now with my without adding it - but you should consider adding the
relativeto the parent to keep your image inside of it.
Примените указанные выше изменения и дайте мне знать, если у вас возникнут дополнительные вопросы!
Я применяю эти изменения. Вернусь к вам, как только закончу. Можете ли вы отредактировать свои изменения в скрипке?
Хорошо, это выглядит очень хорошо на рабочем столе. Справа нет интервала. Спасибо. ..... В мобильной версии для разных мобильных телефонов (iphone 6/7/8 plus, iphone 6/7/8, Pixel 2, Pixel 2 XL) я вижу некоторое пространство справа, тогда как в Galaxy S5 и IPhone Мобильные телефоны 5 / SE Справа я вижу довольно много места. Есть ли что исправить?
Рад, что это работает! Я заметил, что в вашем border есть <input>. Попробуйте удалить его и проверьте еще раз, дайте мне знать, если снова увидите пробел!
Граница в вашем <input>. В HTML. Я использовал <input type = "text" name = "search">, а в CSS я использовал input[type=text] { width: 100%; background: #10314c; }. Вы просите меня удалить background: #10314c;?
Очевидно, вы не добавляли это сами. Но браузер сделал. Запишите border: none на ваш <input>. Или сбросьте любую границу, автоматически созданную браузерами для всех ваших элементов, с помощью: * {border: none}
Хорошо, в CSS, если я использую input[type=text] { width: 100%; // background: #10314c; border: none; }, панель поиска отключается с веб-страницы. Но если я использую input[type=text] { width: 100%; background: #10314c; border: none; }, интервал останется таким же, как в предыдущей скрипке, отправленной вами. Вы можете прислать мне обновленную скрипку? Как я запутался в вашем комментарии.
Вы можете сделать снимок экрана этого места?
При использовании float: right кажется, что содержимое под панелью поиска меняет свое положение.