Show elements side by side

Question

Show elements side by side

I need some assistance.
I am trying to find a simple way to horizontally display the circled elements in this image .

My attempted solution:

.calculator {
display: inline-block;  
}

Unfortunately, this did not have any effect. I have provided the HTML code for better understanding.
Thank you in advance

<div class="calculator">
    <div class="input-group input-small">
        <h4>Adult (12+)</h4>
        <button class="btn theme-btn" id="decrease" value="Decrease Value">-</button>
        <input type="text" id="adult" value="1" class="form-control input-usmall" min="0">
        <button class="btn theme-btn" id="increase" value="Increase Value">+</button>
        <h4>Child (2-11)</h4>
        <button class="btn theme-btn" id="decreasec" value="Decrease Value">-</button>
        <input type="text" id="child" value="0" class="form-control input-usmall" min="0" >
        <button class="btn theme-btn" id="increasec" value="Increase Value">+</button>
        <p>£</p><p id="total"></p><p>.00</p><button class="btn green" onclick="myFunction()">Calculate</button>
    </div>
</div>

html css styling

Answer 1

Answer №1

Enclose the following content in separate divs:

<h4>Adult (12+)</h4>
<button class="btn theme-btn" id="decrease" value="Decrease Value">-</button>
<input type="text" id="adult" value="1" class="form-control input-usmall" min="0">
<button class="btn theme-btn" id="increase" value="Increase Value">+</button>

Next, place this content in its own div:

<h4>Child (2-11)</h4>
<button class="btn theme-btn" id="decreasec" value="Decrease Value">-</button>
<input type="text" id="child" value="0" class="form-control input-usmall" min="0" >
<button class="btn theme-btn" id="increasec" value="Increase Value">+</button>

Lastly, wrap the following content in a separate div:

<p>£</p><p id="total"></p>
<p>.00</p>
<button class="btn green" onclick="myFunction()">Calculate</button>

After that, apply a float property to each of these newly created divs. To keep them organized, consider placing the three divs within a parent div. It is advisable to use float instead of display: inline-block for better browser compatibility, especially in older browsers.

Answer 2

Enclose the following content in separate divs:

<h4>Adult (12+)</h4>
<button class="btn theme-btn" id="decrease" value="Decrease Value">-</button>
<input type="text" id="adult" value="1" class="form-control input-usmall" min="0">
<button class="btn theme-btn" id="increase" value="Increase Value">+</button>

Next, place this content in its own div:

<h4>Child (2-11)</h4>
<button class="btn theme-btn" id="decreasec" value="Decrease Value">-</button>
<input type="text" id="child" value="0" class="form-control input-usmall" min="0" >
<button class="btn theme-btn" id="increasec" value="Increase Value">+</button>

Lastly, wrap the following content in a separate div:

<p>£</p><p id="total"></p>
<p>.00</p>
<button class="btn green" onclick="myFunction()">Calculate</button>

After that, apply a float property to each of these newly created divs. To keep them organized, consider placing the three divs within a parent div. It is advisable to use float instead of display: inline-block for better browser compatibility, especially in older browsers.

Answer 3

Answer №2

Take a look at this live example on Codepen.

If you're using display: inline-block to style certain elements within the .calculator parent element, remember that they won't automatically inherit that behavior. You'll need to directly target those elements.

To improve your code structure, consider creating separate classes for calculator components, breaking down the calculator into smaller parts, and replacing paragraphs with spans:

HTML:

<div class="calculator">
  <div class="calculator-submodule input-group input-small">
    <h4>Adult (12+)</h4>
    <button class="btn theme-btn" id="decrease" value="Decrease Value">-</button>
    <input type="text" id="adult" value="1" class="form-control input-usmall" min="0">
    <button class="btn theme-btn" id="increase" value="Increase Value">+</button>
  </div>
  <div class="calculator-submodule input-group input-small">
    <h4>Child (2-11)</h4>
    <button class="btn theme-btn" id="decreasec" value="Decrease Value">-</button>
    <input type="text" id="child" value="0" class="form-control input-usmall" min="0" >
    <button class="btn theme-btn" id="increasec" value="Increase Value">+</button>
  </div>
  <div class="calculator-submodule">
    <span>£</span>
    <span id="total"></span><span>.00</span><button class="btn green"     onclick="myFunction()">Calculate</button>
  </div>
</div>

CSS:

.calculator-submodule {
  display: inline-block;
  padding-left: 1em;
  text-align: center;
}

Answer 4

Take a look at this live example on Codepen.

If you're using display: inline-block to style certain elements within the .calculator parent element, remember that they won't automatically inherit that behavior. You'll need to directly target those elements.

To improve your code structure, consider creating separate classes for calculator components, breaking down the calculator into smaller parts, and replacing paragraphs with spans:

HTML:

<div class="calculator">
  <div class="calculator-submodule input-group input-small">
    <h4>Adult (12+)</h4>
    <button class="btn theme-btn" id="decrease" value="Decrease Value">-</button>
    <input type="text" id="adult" value="1" class="form-control input-usmall" min="0">
    <button class="btn theme-btn" id="increase" value="Increase Value">+</button>
  </div>
  <div class="calculator-submodule input-group input-small">
    <h4>Child (2-11)</h4>
    <button class="btn theme-btn" id="decreasec" value="Decrease Value">-</button>
    <input type="text" id="child" value="0" class="form-control input-usmall" min="0" >
    <button class="btn theme-btn" id="increasec" value="Increase Value">+</button>
  </div>
  <div class="calculator-submodule">
    <span>£</span>
    <span id="total"></span><span>.00</span><button class="btn green"     onclick="myFunction()">Calculate</button>
  </div>
</div>

CSS:

.calculator-submodule {
  display: inline-block;
  padding-left: 1em;
  text-align: center;
}

Answer 5

Answer №3

Give this a shot:

.input-group.input-small {
    display: inline-block;  
}

And add this to your code:

<div class="calculator">
                <div class="input-group input-small">
                    <h4>Adult (12+)</h4>
                    <button class="btn theme-btn" id="decrease" value="Decrease Value">-</button>
                    <input type="text" id="adult" value="1" class="form-control input-usmall" min="0">
                    <button class="btn theme-btn" id="increase" value="Increase Value">+</button>
                </div>
                <div class="input-group input-small">
                    <h4>Child (2-11)</h4>
                    <button class="btn theme-btn" id="decreasec" value="Decrease Value">-</button>
                    <input type="text" id="child" value="0" class="form-control input-usmall" min="0" >
                    <button class="btn theme-btn" id="increasec" value="Increase Value">+</button>
                    <p>£</p><p id="total"></p><p>.00</p><button class="btn green" onclick="myFunction()">Calculate</button>
                </div>
            </div>

Answer 6

Give this a shot:

.input-group.input-small {
    display: inline-block;  
}

And add this to your code:

<div class="calculator">
                <div class="input-group input-small">
                    <h4>Adult (12+)</h4>
                    <button class="btn theme-btn" id="decrease" value="Decrease Value">-</button>
                    <input type="text" id="adult" value="1" class="form-control input-usmall" min="0">
                    <button class="btn theme-btn" id="increase" value="Increase Value">+</button>
                </div>
                <div class="input-group input-small">
                    <h4>Child (2-11)</h4>
                    <button class="btn theme-btn" id="decreasec" value="Decrease Value">-</button>
                    <input type="text" id="child" value="0" class="form-control input-usmall" min="0" >
                    <button class="btn theme-btn" id="increasec" value="Increase Value">+</button>
                    <p>£</p><p id="total"></p><p>.00</p><button class="btn green" onclick="myFunction()">Calculate</button>
                </div>
            </div>

Show elements side by side

Answer №1

Answer №2

Answer №3

Similar questions

CSS: Experimenting with creating a hover effect that lifts the box upwards

What is the best way to monitor and record the height of a div element in a React application?

Having trouble loading my app.js in Angular - Seeking help on Coursera!

What is the best way to customize bootstrap styles?

Utilizing jQuery to Manage Trays | Automatically Close Tray on Second click

Ways to align elements horizontally while preventing them from shifting positions

Dealing with 'this' while using an addEventListener

The Alchemy feature on hover is not functioning

Ways to align items in the middle of a list

Angular is unable to fetch the chosen option from a dropdown selection

PHP generated timetable displaying improperly formatted HTML cells

Including a Script Tag in an Angular 2 Application with a Source Attribute retrieved from a Web API Request

Ways to turn off the adaptive transient feature

Tips for resolving div overlap issues when utilizing a customized div within a container-fluid layout (Bootstrap)

Tips for troubleshooting grid display issues in Internet Explorer

When using Tailwind CSS with flexbox, elements do not expand horizontally as expected

Tips for sending an HTML form through Ajax, storing the data in a file, and then showcasing the results in a div

I possess a pair of UI tabs. Whenever a button located outside the tab is clicked, I am required to activate a distinct tab

Should I generate an array or pull data directly from the database?

Populate the database with values when the button is clicked