I have a nested unordered list which has main content on the left, and I would like to add options which are floated right, such that they are aligned on the right regardless of the level of indentation.
<ul>
<li> Item 1 <span class='options'> link </span> </li>
<li> Item 2 <span class='options'> link </span>
<ul>
<li>Item 3 <span class='options'> link </span> </li>
</ul>
</li>
</ul>
I have the following css:
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
padding-left: 15px;
width: 400px;
}
.options {
float: right;
width: 50px;
}
When this is used however the options span is aligned to the right, but 1 line below the expected line.
How can I get the options span to line up with the list item?
TIA,
Adam
Instead of floating, you may want to try absolute positioning.
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
padding-left: 15px;
width: 400px;
position: relative;
}
.options {
width: 50px;
position: absolute;
right: 0px;
}
Using this CSS:
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
padding-left: 15px;
width:400px;
}
.options {
float: right;
width: 50px;
}
li li { width:385px}
This unfortunately requires your to define a width minus the padding. depending on your flexibility this will work. Tested in Chrome 3.0.
If modifying the HTML code is OK, you could enclose "Item 1" in a first span and:
float it to left (still floating .options to the right)
use display: inline-block on both span and text-align: right on .options, instead of floats (no compatible with Fx2 though, and only working in IE6/7 because span is an inline elements by default. Would not work with div)
Related
I am trying to position a pseudo :after element 30 pixels to the right of a menu list item.
No matter the length of the text of the item I want the element to be 30px to the right.
I have stripped the following code to the bare minimum that I think is required for this issue.
Note that this is a mobile menu. The menu and the a tag link extends the full width of the browser (phone).
#menu-main-menu-1 li {
position: relative;
list-style: none;
}
#menu-main-menu-1 li a {
padding: 18px 0;
display: block;
text-align: center;
}
#menu-main-menu-1 a:after {
content: "\25CF";
position: absolute;
right: 0;
left: 150px;
top: 20px;
}
<ul id="menu-main-menu-1">
<li class="menu-item">
Menu Item
</li>
<li class="menu-item">
Long Menu Item Text
</li>
</ul>
The above code produces the following result:
As you can see, I need to position it to the left 150px to get the element to go 30px to the right of the item. It works, but I can foresee an issue where if the menu item has a lot of text, it will surpass the 150px and the element will be in the text. For example:
I need the element to be 30px to the right of the text no matter the length. So it would look like:
Here is the JSFiddle link:
JSFiddle
Please note that I have stripped many of the unnecessary styles that do not affect the functionality of this question (color, fonts, etc.)
Any help would be much appreciated!
Thanks
#menu-main-menu-1 li {
list-style: none;
}
.menu-item {
display: flex; /* 1 */
justify-content: center; /* 2 */
}
.menu-item a {
margin: 0 30px; /* 3 */
padding: 18px 0;
}
.menu-item::after {
content: "\25CF";
align-self: center; /* 4 */
}
.menu-item::before {
content: "\25CF"; /* 5 */
visibility: hidden;
}
<ul id="menu-main-menu-1">
<li class="menu-item">
Menu Item
</li>
<li class="menu-item">
Long Menu Item Text
</li>
</ul>
Notes:
Establish flex container (block-level; takes full width)
Horizontally center child elements.
Anchors/menu items have 30px horizontal margins
Right-side pseudo-element is vertically-centered and always 30px to the right of menu item (regardless of text length).
A second pseudo-element is added on the left for equal balance. This keeps the menu items centered in the container. It's concealed with visibility: hidden. (more info)
#menu-main-menu-1 li {
position: relative;
list-style: none;
}
#menu-main-menu-1 li a {
padding: 18px 0;
display: inline-block;
text-align: center;
// Recommended to recenter text
width: 100%;
margin: 0 auto;
}
#menu-main-menu-1 a:after {
content: "\25CF";
padding-left: 30px;
}
I changed #menu-main-menu-1 li a to an inline-block rather than a block, meaning the block should wrap the text, then changed the :after element to pad by 30px to the right.
Is that what you want?
https://jsfiddle.net/tvfudkgt/1/
I have a menu that's generated by a plugin, and I need it to span 2 lines instead of 1 like so:
Example:
I Cannot:
I can't wrap certain li in a div/span
I can't add a <br> where I need the break
I Tried:
I tried adding a Pseudo Element to "Happy" with display: block to create a line break, but couldn't get it to work the way I intended
jsFiddle: http://jsfiddle.net/3xy405oj/
Using content: "\A"; white-space: pre; on the after pseudo-element might help you
JSFiddle
Just add a width to the ul :
ul {
width: 40%;
}
To make it pretty, remove text-align center from the li and add it to ul instead.
Then add margin 0 auto to ul to make it pretty :)
ul {
text-align: center;
margin: 0 auto;
}
Fiddle - http://jsfiddle.net/kq03kzwt/
You can do this:
CSS
ul {
width: 40%;
text-align: center;
margin: 0 auto;
padding: 0;
}
li {
display: inline-block;
margin: 0 2%;
text-align: center;
width: 20%;
}
HTML
<ul>
<li>Crazy</li>
<li>Awesome</li>
<li>Smile</li>
<li class="break-after">Happy</li>
<li>Jitter</li>
<li>Cool</li>
<li>Mango</li>
</ul>
DEMO HERE
You can just float all the elements inside the ul and use clear: left.
<ul>
<li>Crazy</li>
<li>Awesome</li>
<li>Smile</li>
<li>Happy</li>
<li class="break">Jitter</li>
<li>Cool</li>
<li>Mango</li>
</ul>
ul {
width: 100%;
text-align: center;
overflow: auto;
}
li {
margin: 0 5px;
float: left;
}
.break {
clear: left;
}
I have following CSS code:
nav li {
display: inline-block;
text-align: center;
}
nav li a {
display: block;
width: 100%;
height: 100%;
}
nav li :hover {
background-color: var(--main-color);
color: white;
}
Which makes elements in my navbar look like this:
But there's actually 4 items, not 6. I'll add some padding in <li>:
But when I hover over the first item, I have this ugly white space from both sides of it. Margin does exactly the same thing. Let's remove margin/padding and set <li> width manually to 120px:
First two items are now formatted somehow acceptably, but items a and b take visually far too much space than necessary. What I aim for would be something like this (made in image editor):
In other words, I'd like my <li> elements to have their width adjusted to their content with extra padding, while child <a> elements still take up 100% of <li> space. Any ideas?
Edit
I've updated updated the JSFiddle that you've posted.
You need to change your a element to not have display:block (should be inline instead). Also, you don't need to specify width and height of 100%. Just make your padding: 15px for the a, and you'll have equal, well-spaced hover padding.
I adapted your code above and put it into a codepen, see here:
http://codepen.io/himmel/pen/BNJZoL
Here is how I changed your CSS:
nav li {
display: inline-block;
text-align: center;
}
nav li a {
padding-left: 15px; ** add padding to both sides
padding-right: 15px;
display: inline;
}
nav li :hover {
background-color: brown;
color: white;
}
Try using table layout
body {margin:0}
nav ul {
padding:0;
margin:0;
width: 100%;
display: table;
}
nav li {
display: table-cell;
text-align: center;
}
nav li a {
background: #fafafa;
display: block;
width: 100%;
box-sizing: border-box;
padding: 10px;/*or whatever*/
}
nav li :hover {
background-color: brown;
color: white;
}
<nav>
<ul>
<li>Item</li>
<li>Very long item</li>
<li>a</li>
<li>b</li>
</ul>
</nav>
I'm trying to make css-based highscores.
What I basically want, is a triangle shape with list-items.
like so:
1
2 3 4
5 6 7 8 9
I tried several methods to center my elements, but I just can't get it to work.
When I position the elements absolutely, they are layered on top of each other.
Margin-left: 10% and margin-right:10% aren't working either, it's just changing margins
between the list item elements.
I've included a jsfiddle, so you can take a look at it:
http://jsfiddle.net/us454/
hopefully someone can help me out!
Here is a possible solution. Either way. Do not style the UL for that reason. Better use the list items:
http://jsfiddle.net/y3p8f/
ul.triangle
{
margin: auto;
padding: 0;
display: block;
text-align: center;
}
ul.triangle li
{
border-radius:50px;
background-color:black;
display: inline-block;
width: 20px;
height: 20px;
}
HTML:
<ul class="triangle">
<li></li>
</ul>
<ul class="triangle">
<li></li>
<li></li>
</ul>
....
Update:
here is a slightly more clean version: http://jsfiddle.net/y3p8f/2/
This appends all items into one UL
ul.triangle,
ul.triangle li
{
margin: auto;
padding: 0;
}
ul.triangle > li
{
display: block;
text-align: center;
}
ul.triangle > li > ul li
{
border-radius:50px;
background-color:black;
display: inline-block;
width: 20px;
height: 20px;
}
You can use div and text align to center the content
See this example
http://jsfiddle.net/4gUrZ/
div { text-align:center; }
I am trying to have an UL on the right of a SPAN (http://jsfiddle.net/Shg9L/24/).
<div>
<span>Categories</span>
<ul>
<li>Book</li>
<li>Computer</li>
</ul>
</div>
When the window is resized down the LIs should get stacked but not under the SPAN.
The problem is when I resize the window some of the LI items on the right becomes hidden.
I think it is because of "white-space: nowrap" but without it I'm not able to make it work.
Can this be solved?
Display your unordered list as a block and hide the overflow. It will then take up all the available width. The list items will stack neatly in line with the edge of the unordered list when there isn't enough room:
div ul {
list-style: none;
padding: 0;
margin: 0;
display: block;
overflow:hidden;
}
The white-space:nowrap on your container <div> isn't needed as far as I can see. You can remove it.
JSFiddle
http://jsfiddle.net/Shg9L/29/
removed a coupple of things and added position:absolute; and inline:display-block to some elements
div {background-color:orange;}
div span {
background-color: #E0E0E0;
margin-right: 8px;
margin-bottom: 8px;
padding: 8px;
}
div ul {
position:absolute;
top:0px;left:100px;
list-style: none;
padding: 0;
margin: 0;
display: inline-block;
}
div ul li {
background-color: #F0F0F0;
margin-right: 8px;
margin-bottom: 8px;
padding: 8px;
display:inline-block;
}