Как поместить значок «Копировать в буфер обмена» внутри текстового поля ввода?

Я разрабатываю генератор паролей, и у меня возникли проблемы с попыткой разместить значок «копировать в буфер обмена» внутри текстового поля ввода, где будет сгенерирован пароль.

Я попытался разместить текстовое поле и значок внутри гибкого контейнера, чтобы они были центрированы по горизонтали. Затем я попытался «вставить» значок внутри текстового поля, используя отступ справа, но это просто сдвинуло и текстовое поле, и значок, что мне не нужно.

Может ли кто-нибудь дать представление?

<!DOCTYPE html>
<html lang = "en">
<head>
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <link rel = "stylesheet" href = "style.css">
  <link rel = "preconnect" href = "https://fonts.googleapis.com">
  <link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin>
  <link href = "https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&display=swap" rel = "stylesheet">
  <link rel = "preconnect" href = "https://fonts.googleapis.com">
  <link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin>
  <link href = "https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap" rel = "stylesheet">
  <title>Home</title>
</head>
<body>
  <section id = "container">
     <div id = "main-flex-container">
      <h1>Generate a <br><span>random password</span></h1>
      <h2>Never use an insecure password again.</h2>
    </div>
    <div id = "input-flex-container">
      <input type = "text" id = "password" readonly>
      <img src = "clipboard.png">
    </div>

  </section>
  <script src = "script.js"></script>
</body>
</html>



body{
  margin: 0;
}

#container{
  background-color: #1F2937 ;
  width: 650px;
  height: 475px;
  margin: 0 auto;
  margin-top: 100px;
  border-radius: 12px;
}

#main-flex-container{
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1 {
  margin-left: -40px;
  padding-top: 30px;
  font-size: 48px;
  font-family: Karla;
  font-weight: 700;
  color: #ffffff;
}

span{
  color: #4ADF86;
}

h2{
  margin-top: -20px;
  margin-bottom: 40px;
  font-size: 24px;
  color: #ffffff;
  font-family: Inter;
  font-weight: 400;
}

#input-flex-container{
  display: flex;
  justify-content: center;
}

input {
  width: 440px;
  height: 35px;
  border: none;
  border-radius: 6px;
}

input:focus{
  outline: none;
}

css responsive-design position css-position textfield

27.03.2024 00:46

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

127

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Добавьте position: relative к #input-flex-container, чтобы сделать его ссылкой на позицию изображения. Затем примените к изображению следующие настройки:

#input-flex-container img {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(215px, -50%);
}

Это работает, поскольку у вас есть поле фиксированной ширины input: настройки «Верхний и правый» перемещают верхний правый угол изображения в центр (центрированного) ввода (на самом деле в центр контейнера, но это то же самое в Это дело); transform: translate(215px, -50%) переместит его назад по вертикали на 50% от его собственной высоты, тем самым центрируя его по вертикали внутри ввода, и на 215 пикселей вправо (= чуть меньше половины ширины ввода), чтобы переместить его к правому концу, если ввод, но внутри поля.

body {
  margin: 0;
}

#container {
  background-color: #1F2937;
  width: 650px;
  height: 475px;
  margin: 0 auto;
  margin-top: 100px;
  border-radius: 12px;
}

#main-flex-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1 {
  margin-left: -40px;
  padding-top: 30px;
  font-size: 48px;
  font-family: Karla;
  font-weight: 700;
  color: #ffffff;
}

span {
  color: #4ADF86;
}

h2 {
  margin-top: -20px;
  margin-bottom: 40px;
  font-size: 24px;
  color: #ffffff;
  font-family: Inter;
  font-weight: 400;
}

#input-flex-container {
  display: flex;
  justify-content: center;
  position: relative;
}

input {
  width: 440px;
  height: 35px;
  border: none;
  border-radius: 6px;
}

input:focus {
  outline: none;
}

#input-flex-container img {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(215px, -50%);
}

<!DOCTYPE html>
<html lang = "en">

<head>
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <link rel = "stylesheet" href = "style.css">
  <link rel = "preconnect" href = "https://fonts.googleapis.com">
  <link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin>
  <link href = "https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&display=swap" rel = "stylesheet">
  <link rel = "preconnect" href = "https://fonts.googleapis.com">
  <link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin>
  <link href = "https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap" rel = "stylesheet">
  <title>Home</title>
</head>

<body>
  <section id = "container">
    <div id = "main-flex-container">
      <h1>Generate a <br><span>random password</span></h1>
      <h2>Never use an insecure password again.</h2>
    </div>
    <div id = "input-flex-container">
      <input type = "text" id = "password" readonly>
      <img src = "clipboard.png">
    </div>

  </section>
</body>

</html>

27.03.2024 00:59

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

Форматирование CSS с помощью flexbox и других элементов div

Размер шрифта HTML не работает должным образом?

Как выровнять элементы слева и справа с помощью flex-wrap

NextJs — стили классов CSS Tailwind не применяются на адаптивном экране

Адаптивный заголовок, не отображается

Нужны предложения по решению проблемы с адаптивным дизайном: работает на настольном компьютере, но не на мобильном устройстве

Как сделать все страницы приложения Flutter отзывчивыми?

Как вертикально центрировать адаптивный макет и исправить отступы на мобильных устройствах

Как создать страницу, адаптивную по высоте, а не по ширине?

Функция раскрывающегося списка кнопок

Как поместить значок «Копировать в буфер обмена» внутри текстового поля ввода?

Ответы 1

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

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