I'd like to place html input tag and button tag on the same line.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        /*ID Style*/
        #input_search{
            width: 400px;
            height: 40px;
            padding: 0px 0px 0px 0px;
            margin: 0px 0px 0px 0px;
            border: 1px solid #dfe1e5;
        }
        #input_search_button{
            width: 40px;
            height: 40px;
            padding: 0px 0px 0px 0px;
            margin: 0px 0px 0px 0px;
            border: 1px solid #dfe1e5;
        }

    </style>
</head>
<body>
    <input type="text" id="input_search" value="" placeholder="ISBN">
    <!-- <input type="button" value="JOIN"> -->
    <button id="input_search_button" type="button">
        <img src="/source/search.png" alt="">
    </button>
</body>
</html>

If you run the code above,

The problem of not aligning lines continues to occur. And if you adjust the margin value of button, the input box moves together, and on the contrary, when the margin value of the input box is set to negative, no change occurs. I've been thinking about it for over 5 hoursThank you in advance😂

html html5 css css3

2022-09-20 16:40

1 Answers

What you are implementing is called inline form. It's an old project. The key idea is to combine input and button into one container and set the height, margin, etc. within it.

I'd like you to search for it. You can use display: flex or height: 100% anyway, there are many approaches. If you look at the inline form implementation itself first, you will see what the best solution is for where you are going to apply it now.

2022-09-20 16:40

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656