How to Make a Series of <P> Elements Display Horizontally

How can I make a series of p elements display horizontally?

Try this:

<p style="display:inline-block">Some text!</p>
<p style="display:inline-block">More text!</p>

That being said, the paragraph tag is antiquated for interface use. It directly implies certain spacing that you would have to override in the CSS. You should reserve the paragraph tag for actual inline paragraphs of text. Use div or span tags for interface layout. For example:

.menuitem { display: inline-block; min-width: 72px; background-color: #AAAAFF; }

<div class="menuitem">Some text!</div>
<div class="menuitem">More text!</div>

Here's a fiddle of it working: https://jsfiddle.net/nqey10p0/

The primary reason to use inline-block is to have the content behave like a line of text, but be able to force width and height like in an image.

How to make p element and buttons aligned horizontally with CSS

Use 'vertical-align' and adjust the default 'margin-bottom' of the 'p' tag.

body {
background-color: rgb(44, 63, 83);
}

#timer {
margin-top: 1%;
}

#time-p {
color: white;
font-family: Helvetica, Arial, sans-serif;
font-size: 3rem;
display: inline-block;
color: black;
vertical-align: middle;
margin-bottom: 0;
}
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Timer</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<!-- My own CSS -->
<link rel="stylesheet" href="style.css">
</head>

<body>
<div id="timer">
<p id="time-p">00:00:00</p>
<!-- Start and reset buttons -->
<button class="btn btn-success btn-lg">Start</button>
<button class="btn btn-danger btn-lg">Reset</button>
</div>

<!-- jQuery 3.5.1 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- BootStrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
</body>

</html>

How to make my content stack horizontally

You can set display: inline-block for the elements to stack them horizontally. The default value for these elements are display: block which allows it to take up the entire width and wrap the next element to a new line.

.form-group,p {  display: inline-block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="pull-right">  <div class="form-group">    <label for="sel1">Select(select one):</label>    <select class="form-control" id="sel1">      <option>Day</option>      <option>Week</option>      <option>Month</option>    </select>  </div>  <p>    <label for="value">Value from 1 to 10:</label>    <input type="text" id="value" readonly style="border:0; color:#f6931f; font-weight:bold;">  </p>  <div id="slider"></div></div>

How can I arrange HTML elements horizontally?

You do not need the paragraph (<p>) tags, those are only for actual paragraphs, that would need to have line separations between them. If you are just creating buttons on the same line, you do not need them.

Example:

<div class='navbar'>
<a href="index.html">Home</a>
<a href="explore.html">Explore</a>
</div>

Aligning Two Block Elements Horizontally Rather Than Manually Using Position

It's a perfect situation (like almost every other) for CSS_layout/Flexbox

.head-one {  display: flex;  align-items: center;  justify-content: space-around;}
#cal { max-width: 60vw; border: solid; border-radius: 25px; padding: 10px;}
<div class="head-one">  <h2 id="#about-me">About Me</h2>  <p id="cal">My name is Cal Cook. I'm 26 years old and live in Boston, Massachusetts. I'm from NYC originally. I'm passionate about cryptocurrency, web design and SEO. I built this site to feature my work.</p></div>

How to display paragraphs as a horizontal list?

flexbox is a good tool for this. You only need one wrapper Element (flexbox-container).

.flexbox-container {  display: flex;  justify-content: space-between;  flex-flow: row nowrap;}
<body>  <section class="about">    <h1>WHO I AM</h1>    <div class="col-1">      <h3>About me</h3>      <p>sometihing      </p>    </div>    <div class="flexbox-container">      <div class="col-3">        <h3>My work</h3>        <p>Something        </p>      </div>      <div class="col-3">        <h3>Ambitions</h3>        <p>Something        </p>      </div>      <div class="col-3">        <h3>Accomplishments</h3>        <p>Something        </p>      </div>    </div>  </section></body>

How to spread elements horizontally evenly?

Try this (http://jsfiddle.net/BYEw5/):

<div class="container">
<div>A</div><div>B</div><div>C</div>
</div>

.container > div {
display: inline-block;
display: -moz-inline-box;
*display: inline; /* For IE7 */
zoom: 1; /* Trigger hasLayout */
width: 33%;
text-align: center;
}

Since you're dealing with inline-block, you can't have spaces between the tags (ugly, but it works), otherwise the space will be visible.

Edit 1:
Here is some more info on the inline-block issues: http://blog.another-d-mention.ro/programming/cross-browser-inline-block/, http://www.aarongloege.com/blog/web-development/css/cross-browser-inline-block/. You may also have to add display: -moz-inline-box;.

Edit 2:
Also, 33%*3 is not 100%. If you truly want 100% and don't mind some space between the divs you could do:

.container > div {
display: inline-block;
display: -moz-inline-box;
*display: inline; /* For IE7 */
zoom: 1; /* Trigger hasLayout */
margin-left: 2%;
width: 32%;
text-align: center;
}

.container > div:first-child {
margin-left: 0;
}

How can I get there three elements to align horizontally?

Wrap you contents within a div and apply css display: flex to align them horizontally

CSS

#egg_img {
position: relative;
width: 100px;
}

#title {
text-align: center;
margin: 0 auto;
color: white;
text-decoration: underline;
width: 250px;
margin-top: 50px;

}

#introduction {
text-align: center;
margin: 0 auto;
margin-top: 55px;
width: 100px;
color: black;
margin-top: -9px;
}

#bacon_img {
position: relative;
width: 100px;
}

HTML

<div style="display:flex">
<div class="col" id="egg_area">
<img id="egg_img" src="img/egg.png">
</div>
<div class="col-6" id="introduction">
<p>Hello! Welcome to the Bacon, Egg, and Cheese Sandwich Web Map! The map below will allow you to search for the best deals on your favorite breakfast sandwich! Simply click a location anywhere within the 5 boroughs to reveal its nearest delis. By clicking each of the revealed markers you can view more details about each specific deli.</p>
</div>
<div class="col" id="bacon_area">
<img id="bacon_img" src="img/bacon.png"/>
</div>
</div>

JSFIDDLE

How can I horizontally align my divs?

To achieve what you are trying to do:

Consider using display: inline-block instead of float.



Related Topics



Leave a reply



Submit