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 div
s 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
Background Size Cover Ie11 Not Covering Full Area
How to Put The Text of Footer in Center and The Links of Menu in Center and Next to Each Other
Remove CSS Filter on Child Elements
Use Full Width Excluding Overflow Scrollbar with "Position: Absolute"
Google Fonts External CSS Vs Copying The Code of External CSS in My CSS
How to Set a Different Background Image for Each Page in Rails 3 Site
CSS Cursors Are Not Working in Webkit Browsers
How to Customize The Editorfor CSS with Razor
Mix-Blend-Mode Doesn't Work on Chrome
Is There an Equivalent to Jquery's: First Selector in CSS3
Horizontal Navigation with Logo in Middle
Jqgrid Rowattr Not Applying Class
Why Is Google Font Weight Not Working
Understanding The Z-Offset in Transform-Origin