how to align one item in the OL to the right while the others are on the left?
Use Bootstrap's pull-right
class...
<ol class="breadcrumb">
<li>2015</li>
<li>Feb Release</li>
<li class="pull-right">Last Update: 3:15pm</li>
</ol>
http://codeply.com/go/jb4uBgIIX1
How can I align one item right with flexbox?
To align one flex child to the right set it withmargin-left: auto;
From the flex spec:
One use of auto margins in the main axis is to separate flex items
into distinct "groups". The following example shows how to use this to
reproduce a common UI pattern - a single bar of actions with some
aligned on the left and others aligned on the right.
.wrap div:last-child {
margin-left: auto;
}
Updated fiddle
.wrap { display: flex; background: #ccc; width: 100%; justify-content: space-between;}.wrap div:last-child { margin-left: auto;}.result { background: #ccc; margin-top: 20px;}.result:after { content: ''; display: table; clear: both;}.result div { float: left;}.result div:last-child { float: right;}
<div class="wrap"> <div>One</div> <div>Two</div> <div>Three</div></div>
<!-- DESIRED RESULT --><div class="result"> <div>One</div> <div>Two</div> <div>Three</div></div>
Center one and right/left align other flexbox element
Below are five options for achieving this layout:
- CSS Positioning
- Flexbox with Invisible DOM Element
- Flexbox with Invisible Pseudo-Element
- Flexbox with
flex: 1
- CSS Grid Layout
Method #1: CSS Positioning Properties
Apply position: relative
to the flex container.
Apply position: absolute
to item D.
Now this item is absolutely positioned within the flex container.
More specifically, item D is removed from the document flow but stays within the bounds of the nearest positioned ancestor.
Use the CSS offset properties top
and right
to move this element into position.
li:last-child { position: absolute; top: 0; right: 0; background: #ddd;}ul { position: relative; padding: 0; margin: 0; display: flex; flex-direction: row; justify-content: center; align-items: center;}li { display: flex; margin: 1px; padding: 5px; background: #aaa;}p { text-align: center; margin-top: 0;}span { background-color: aqua;}
<ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li></ul><p><span>true center</span></p>
How may I align text to the left and text to the right in the same line?
<p style="text-align:left;"> This text is left aligned <span style="float:right;"> This text is right aligned </span></p>
Aligning elements left, center and right in flexbox
Use nested flex containers and flex-grow: 1
.
This allows you to create three equal-width sections on the nav bar.
Then each section becomes a (nested) flex container which allows you to vertically and horizontally align the links using flex properties.
Now the left and right items are pinned to the edges of the container and the middle item is perfectly centered (even though the left and right items are different widths).
.nav { display: flex; height: 50px; /* optional; just for demo */ background: white;}
.links { flex: 1; /* shorthand for: flex-grow: 1, flex-shrink: 1, flex-basis: 0 */ display: flex; justify-content: flex-start; align-items: center; border: 1px dashed red;}
.header-title { flex: 1; display: flex; justify-content: center; align-items: center; border: 1px dashed red;}
.logout { flex: 1; display: flex; justify-content: flex-end; align-items: center; border: 1px dashed red;}
.links a { margin: 0 5px; text-decoration: none;}
<div class="nav mobilenav">
<div class="links"> <a href="/institutions/">Institutioner</a> <a href="/leaders/">Ledere</a> </div>
<div class="header-title">Institution institution 1</div>
<div class="logout"><a class="button-dark" href="/user/logout">Log ud</a></div>
</div>
How do I align the list items in an ol with my p?
Use a css reset/ normalize, set a custom padding-left
, and use a meta viewport tag for mobile devices.
How do I right align div elements?
You can make a div that contains both the form & the button, then make the div float to the right by setting float: right;
.
ol li have left margin ,and can't left align
Have you tried adding the css:
ol{ padding-left:0; list-style-position:inside; }
working jsFiddle
Related Topics
How to Make Header Image Responsive
Easiest Way to Convert Polygon Clip-Path to Microsoft Edge Supported "Clippath" Svg
Cannot Stretch Svg Background Image, Aspect Ratio Will Be Preserved
Overflow with Absolute/Relative Positioning Layout
CSS Floats and Its Stack Order
Make an Image Fit Its Container by Setting The Image Height to The Containers Heights
3D-Like Hover Effect on Button
Select: Last-Child with Especific Class Name (With Only CSS)
Why Is My CSS Class Style Not Applying to Specific <Li>'s
Flexbox Does Not Work in Safari, Striked Out in Web Inspector
CSS Linear Gradient for Div with Dynamic Height
What Actually Happens to CSS in High Contrast Mode
How to Combine Compass with Bless
How to Simply Add a CSS File to Change The Background Color for My Shiny App
How to Draw a Border Around The Text of a Javafx Label
How to Keep Bootstrap 3 Navbar as Collapsed for All Screen Sizes