Arrange the HTML elements in a line, one following the next

Question

Arrange the HTML elements in a line, one following the next

I need assistance with aligning two dropdown lists in the jsbin provided. How can I position them one after the other, center them on the page, and ensure there is enough space between the two elements without manually adding spaces using

In addition, my bootstrap jumbotron header does not fill the entire width of the page. I have tried adjusting the width to 1600px as shown below, but it still leaves space on the left side.

<div class="jumbotron" style="width: 1600px;">

UPDATE: After trying the suggested code changes, the jumbotron now spans the full width, but the appearance of the dropdown lists is not matching what is shown in your jsbins. Please refer to the screenshot below for reference.

https://i.sstatic.net/hNPkM.png

html css twitter-bootstrap

Answer 1

Answer №1

Check out this JSBin link for reference: http://jsbin.com/tapuviyoja/1/edit?html,css,output

If you're wondering about aligning elements one after another, clarify if you mean inline or on a new line. For inline alignment, the <br> tag between select elements should be removed and use display: inline-block;.

The Jumbotron may not extend full width due to padding in its container. Eliminate the padding and set both container and jumbotron width to 100%.

To center-align the form, increase its width to match the window's width and then apply text-align:center.

.line{
width:33%;
float:left;
}

.jumbotron {
padding-top: 0%;
padding-bottom: 0%;
width:100%;
}

.container{
width:100%;
padding:0;
}

body {
background: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRZQXod-TpW5bx9oSysCVEdpsYS_9ssKwfbS04asZ2L9xzSnOiHdhFWxFS9') no-repeat center center;
/*opacity: 0.2;*/
background-size: cover;
}

form{
text-align:center;
width:100%;
}

form select{
display:inline-block;
}

Answer 2

Check out this JSBin link for reference: http://jsbin.com/tapuviyoja/1/edit?html,css,output

If you're wondering about aligning elements one after another, clarify if you mean inline or on a new line. For inline alignment, the <br> tag between select elements should be removed and use display: inline-block;.

The Jumbotron may not extend full width due to padding in its container. Eliminate the padding and set both container and jumbotron width to 100%.

To center-align the form, increase its width to match the window's width and then apply text-align:center.

.line{
width:33%;
float:left;
}

.jumbotron {
padding-top: 0%;
padding-bottom: 0%;
width:100%;
}

.container{
width:100%;
padding:0;
}

body {
background: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRZQXod-TpW5bx9oSysCVEdpsYS_9ssKwfbS04asZ2L9xzSnOiHdhFWxFS9') no-repeat center center;
/*opacity: 0.2;*/
background-size: cover;
}

form{
text-align:center;
width:100%;
}

form select{
display:inline-block;
}

Answer 3

Answer №2

Modifying the <form> like this is effective:

<form method="get" action="index.php" style="text-align: center;">

Alternatively, you can include the following CSS:

form {text-align: center;}

Answer 4

Modifying the <form> like this is effective:

<form method="get" action="index.php" style="text-align: center;">

Alternatively, you can include the following CSS:

form {text-align: center;}

Answer 5

Answer №3

To start, enclose the form within a wrapping container.

Next, apply the display property to the form as inline-block, allowing it to respond to the text-align: center property of the parent .container. Lastly, set the text-align property on the form to left in order to prevent child elements with inline and inline-block from being centered.

HTML

  <div class="container">
    <form method="get" action="index.php">
      ...
    </form>
  </div>

CSS

.container {
  text-align: center;
}

form {
  display: inline-block;
  text-align: left;
}

DEMO http://jsbin.com/abcdefg123/1/edit?html,css,output

Answer 6

To start, enclose the form within a wrapping container.

Next, apply the display property to the form as inline-block, allowing it to respond to the text-align: center property of the parent .container. Lastly, set the text-align property on the form to left in order to prevent child elements with inline and inline-block from being centered.

HTML

  <div class="container">
    <form method="get" action="index.php">
      ...
    </form>
  </div>

CSS

.container {
  text-align: center;
}

form {
  display: inline-block;
  text-align: left;
}

DEMO http://jsbin.com/abcdefg123/1/edit?html,css,output

Answer 7

Answer №4

To address your concerns, the following adjustments should resolve the issues you are facing. It seems there were some structural problems with your HTML code, such as having div elements within the head section.

body {
  background: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRZQXod-TpW5bx9oSysCVEdpsYS_9ssKwfbS04asZ2L9xzSnOiHdhFWxFS9') no-repeat center center;
  background-size: cover;
  margin: 0;
  padding: 0;
}
.container {
  padding: 0
}
.jumbotron {
  padding: 0;
  margin: 0;
}
form {
  text-align: center
}
select {
  margin-right: 10px
}

<html>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

</html>

<body>
  <div class="container">
    <div class="jumbotron">
      <h1 align="center" style="font-family:Comic Sans MS">Check Near You</></h1>
      <p align="center" style="font-family:Comic Sans MS">See which articles are near you ...</p>
    </div>
  </div>
  <form method="get" action="index.php">
    <select class="language" name="language">
      <option value="tagalog">Tagalog</option>
      <option value="english">English</option>
    </select>


    <select class="year" name="year">
      <option value="2010">2010</option>
      <option value="2011">2011</option>
      <option value="2012">2012</option>
      <option value="2013">2013</option>
      <option value="2014">2014</option>
      <option value="2015">2015</option>
      <option value="2016">2016</option>
      <option value="2017">2017</option>
      <option value="2018">2018</option>
      <option value="2019">2019</option>
      <option value="2020">2020</option>
    </select>

    <input type="submit" value="submit">
  </form>
</body>

</html>

Answer 8

To address your concerns, the following adjustments should resolve the issues you are facing. It seems there were some structural problems with your HTML code, such as having div elements within the head section.

body {
  background: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRZQXod-TpW5bx9oSysCVEdpsYS_9ssKwfbS04asZ2L9xzSnOiHdhFWxFS9') no-repeat center center;
  background-size: cover;
  margin: 0;
  padding: 0;
}
.container {
  padding: 0
}
.jumbotron {
  padding: 0;
  margin: 0;
}
form {
  text-align: center
}
select {
  margin-right: 10px
}

<html>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

</html>

<body>
  <div class="container">
    <div class="jumbotron">
      <h1 align="center" style="font-family:Comic Sans MS">Check Near You</></h1>
      <p align="center" style="font-family:Comic Sans MS">See which articles are near you ...</p>
    </div>
  </div>
  <form method="get" action="index.php">
    <select class="language" name="language">
      <option value="tagalog">Tagalog</option>
      <option value="english">English</option>
    </select>


    <select class="year" name="year">
      <option value="2010">2010</option>
      <option value="2011">2011</option>
      <option value="2012">2012</option>
      <option value="2013">2013</option>
      <option value="2014">2014</option>
      <option value="2015">2015</option>
      <option value="2016">2016</option>
      <option value="2017">2017</option>
      <option value="2018">2018</option>
      <option value="2019">2019</option>
      <option value="2020">2020</option>
    </select>

    <input type="submit" value="submit">
  </form>
</body>

</html>

Arrange the HTML elements in a line, one following the next

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the method for retrieving the IDs of checkboxes that have been selected?

What is the most effective way to add images to a table using JavaScript?

What is the best way to place a semi-transparent black overlay on an image?

Three brothers and sisters - One must expand responsively while the remaining two maintain minimum content sizes

designing a button with eye-catching CSS3 styles

Is there a way to manipulate CSS to update automatically when new content is loaded via ajax?

JQuery method for altering currentTime's format

Is the ng bootstrap modal within Angular failing to show up on the screen

What is the process for combining AngularJS filters?

A guide to customizing nested elements in react using styled-components

Initiate the printing process by executing the window.print() function. As the document is being

What's the best way to search through various addresses for the source in an image tag?

What are the signs that an element was visible on screen prior to navigation?

Troubleshooting the issue of onclick not functioning in JavaScript

Could HTML code be inserted into the <Head> section of a NextJS page?

Adjusting webpage zoom based on different screen sizes

What is preventing the conditional class in Svelte from being applied when the page loads?

When hovering over nav bar links, shadows are not displayed

Incorporating tawk.to into a Nuxt/Vue application

Unable to achieve horizontal alignment with DIV element set as inline-block