Help us understand the problem. What is going on with this article?

レスポンシブなテキストボックスを実装する

More than 5 years have passed since last update.

突然ですが、問題です。

問題

HTML、CSSを使用し、以下の条件でテキストボックスとSubmitボタンを配置しなさい。

条件

  1. テキストボックスとSubmitボタンを横並びで表示
  2. Submitボタンは固定幅※何ピクセルでもOK
  3. テキストボックスはSubmitボタンの幅を除いて、ブラウザいっぱいに伸縮する事

Wireframe.png
 

答え

answer.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .hoge {
            overflow: hidden;
        }
        input[type=text] {
            width: 100%;
            box-sizing: border-box;
        }
        input[type=submit] {
            float: right;
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <div>
        <input type="submit" value="submit">
        <div class="hoge">
            <input id="" type="text" name="">
        </div>
        <div style="clear: both;"></div>
    </div>
</body>
</html>
cawpea
Frontend / UI / UX / Agile / Coffee
https://blog.cawpea.me/
goodpatch
Goodpatch(株式会社グッドパッチ)はUI/UXデザインを強みにビジネスモデルやブランド、組織をデザインし、デザインの価値向上を目指すグローバルデザインカンパニーです。2020年6月30日、デザイン会社初の東証マザーズ上場。サービスやプロダクトの企画設計から関わりコンセプトメイキング、UX設計、プロトタイピング、UIデザイン、実装までワンストップで提供しています。
https://goodpatch.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away