CSS: установить встроенный элемент внутри отступа

Question

CSS: установить встроенный элемент внутри отступа

Вот альтернатива, использующая пакет.

import java.awt.Color;
import java.awt.Dimension;
import javax.swing.JFrame;
import javax.swing.JPanel;

public class PackExample extends JFrame {

    public PackExample(){
        JPanel panel = new JPanel();
        panel.setPreferredSize(new Dimension(800,600));
        panel.setBackground(Color.green);
        add(panel);
        pack();
        setVisible(true);
   }

   public static void main(String[] args){
     new PackExample();
   }

}

2

html css frontend instagram

задан Ethan 18 March 2019 в 01:29

3 ответа

Другие вопросы по тегам:

html css frontend instagram

Похожие вопросы:

score 0 · Answer 1

Ответ в том, что они на самом деле не помещают значок в поле ввода. Просто нарисуйте прямоугольник вокруг значка и <input>. Сам значок добавляется к <span> в строке сразу после выделенного <input> на изображении в вопросе. Ищите класс coreSpriteSearchIcon.

Когда я проверил, что <span>, я увидел применение этих стилей:

background-image: 
  url(/static/bundles/metro/sprite_core_2x_6ba81dcece9b.png/6ba81dcece9b.png);
}

background-size: 410px 396px;
background-position: -240px -366px;

height: 10px;
width: 10px;

background-image - это файл спрайта (изображение, содержащее несколько меньших изображений). background-size Убедитесь, что изображение не растянуто. background-position говорит вам, где найти значок поиска в увеличенном изображении спрайта. И, width и height говорят вам, сколько изображения отображать.

Они смогли разместить его там, где он есть, используя absolute позиционирование:

left: 11px;
position: absolute;
top: 9px;
z-index: 2;

score 0 · Answer 2

Вот пример окна поиска jQuery на значке скрытия фокуса в соответствии с вашей ссылкой. Я надеюсь, что этот ответ будет полезным. 116

score 0 · Answer 3

Одним из способов достижения этого является использование position: absolute и помещение ввода в оболочку. Позвольте мне показать вам:

.input-wrapper {
  position: relative;
}

.input-wrapper img {
  position: absolute;
  top: 5px;
  left: 5px;
}

input {
  height: 40px;
  width: 200px;
  padding-left: 35px;
  
  font-size: 20px;
  
  box-sizing: border-box;
}

<div class="input-wrapper">
  <img src="https://picsum.photos/30"/>
  <input type="text" />
</div>

Так что в основном мы используем position: relative для перемещения img относительно него. Также обратите внимание, что вам нужно добавить дополнительные padding (в данном случае левый), чтобы текст не перекрывался с иконкой.

Есть много способов сделать то же самое: position: relative, отрицательный margin, background-image, использование псевдоэлементов, но абсолютное позиционирование, на мой взгляд, наиболее семантически правильно.