I want to arrange the elements in a horizontal row.

I would like to line up the elements from the business hours label to the second time input even if the screen becomes smaller, but it doesn't work.If you turn down the screen, the label and input text boxes will line up vertically.Could you tell me how to correct it?
[Code]

<!DOCTYPE html>
<html lang="ja">
    <head>
        <metacharset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title> Ayeo Shop </title>

        <link href="css/bootstrap.min.css"rel="stylesheet">
        <link type="text/css"rel="stylesheet" href="css/bootstrap-timepicker.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script type="text/javascript" src="js/bootstrap-timepicker.min.js"></script>
    </head>
    <body>
        <div class="container">
            <p> Ayeo Shop </p>
            <p>Address: Chiyoda Ward, Tokyo;/p>
            <form class="form-inline">
                <div class="form-group">
                    <label class="control-label" for="businesshours">business hours:</label>
                    <div class="input-group bootstrap-timepicker timepicker" style="width:110px">
                        <input type="text" id="businesshours" class="form-control input-small timepicker1">
                        <span class="input-group-addon"><ic class="glyphicon glyphicon-time">/i>>/span>
                    </div>~
                    <div class="input-group bootstrap-timepicker timepicker" style="width:110px">
                        <input type="text" class="form-control input-small timepicker1">
                        <span class="input-group-addon"><ic class="glyphicon glyphicon-time">/i>>/span>
                    </div>
                </div>
            </form>
        </div>
        <script type="text/javascript">
            $('.timepicker1').timepicker({
                showMeridian: false
            });
        </script>
    </body>
</html>

html jquery css bootstrap

2022-09-29 22:04

1 Answers

.form-inline.input-group{
    display:inline-table;
    vertical-align:middle;
}

The above CSS works when lining up side by side, so it works even if you write it outside of the media query, but it doesn't work if it affects anything else, so

.input-group.timepicker{
    display:inline-table;
    vertical-align:middle;
}

How about this kind of designation?

2022-09-29 22:04

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