LoginSignup
18
17

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-01-26

突然ですが、問題です。

問題

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>
18
17
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
18
17