Сегодня менеджер проекта только что дал мне работу и попросил меня реализовать такую функцию: чего я хочу достичь, так это сузить текстовое поле кода проверки, а затем добавить изображение кода проверки вправо, а в случае отзывчивого макета изображение кода проверки может храниться в той же строке, что и текстовое окно кода проверки при доступе к мобильному терминалу. Как это сделать? Это было трудно в течение долгого времени, и позже я нашел идею реализации. Редактор поделится с вами своими идеями и процессом реализации. Если у вас есть какие -либо вопросы, пожалуйста, спросите их, изучите и продвигайте прогресс вместе!
Идеи реализации:
Реализация
Добавьте к нему код макета Bootstrap для управления макетом в различных разрешениях.
Единственная предпосылка для этой реализации состоит в том, что высота вашего изображения кода проверки должна быть такой же, как и высота входной коробки (высота поле ввода составляет около 34px).
После этого это будет просто. Пусть изображение кода проверки перекрывается в поле ввода и используйте абсолютный макет, чтобы завершить его.
PS: Не забудьте добавить левое значение для прокладки в поле ввода (больше, чем ширина кода проверки), в противном случае оно заблокирует текст.
<style> #captcha {border-radius: 2px; cursor: pointer; позиция: Absolute; z-index: 3; слева: 0; Top: 0;}#validatecode {padding-left: 110px;} </style> <div> <label for = "validatecode"> verifice Code <Small> Click on Image, чтобы обновлять версию. id = "captcha" src = 'data: image/png; base64, {{captcha :: doimg () [' imgcode ']}}'> <input type = "text" id = "validatecode" name = "validatecode" Placeholder = "Четырех дигитный код символа"> </div> </div>Позвольте мне показать спрашивающему мое решение. Это веб -сайт, о котором я пишу. Размер изображения соответствует высоте входной коробки. Нет необходимости менять ширину ввода. Просто позвольте изображению кода проверки покрыть поле ввода. Затем добавьте левое значение для прокладки к входу. Размер немного больше ширины изображения кода проверки. Неудобно отвечать на вопросы на вашем телефоне. Я объясню это подробно, когда вернусь.
Выше приведено метод реализации текстового поля в начальной загрузке, который я представил вам, сузив ширину текстового поля и добавив изображение кода проверки. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!