Here is the fiddle:
https://jsfiddle.net/5jnnutg8/
My question is how can I align the "something #" list items as center and inline. One can see the "Hi" title is aligned in the center using text-align: center in css, but this doesn't seem to work for the list items.
Is there a pure css way of doing this without messing around with the <div>, <ul>, and <li> structure, as I am using a plugin for wordpress and it would be a pain to change this.
I want it to be that the "something #" list items are centered aligned, and if the browser is resized the "something 3" drops down but is still centered -- hope that makes sense.
Thanks!
Do not use float: left, simply use display: inline-block;
li {
display: inline-block;
}
Working demo
.list-holder {
background: black;
height: 100px;
color: white;
text-align:center;
}
.div-list-item {
background: red;
color: black;
margin-left: 10px;
}
.ul-class {
list-style: none;
padding: 0;
}
li {
display: inline-block;
}
a {
display: black;
}
<div class="list-holder">
Hi
<ul class="ul-class">
<li class="li-class">
<div class="div-list-item">
Something 1
</div>
</li>
<li class="li-class">
<div class="div-list-item">
Something 2
</div>
</li>
<li class="li-class">
<div class="div-list-item">
Something 3
</div>
</li>
</ul>
</div>
Related
I'm trying to keep my logo "Reservia" and my LI "S'inscrire" on the same line and wrap my 2 other LI "Hebergement" and "Activités" on a line under this first one but it doesn't work.
Here is my Header
<header>
<div id="containerHeader">
<img src="images/logo/Reservia.svg" class="test" alt="Logo reservia">
<nav class="Navmenu">
<ul class="liMenu">
<li class="liMenu--list liMenu--list_nocolor">
Hebergement
</li>
<li class="liMenu--list liMenu--list_nocolor">
Activités
</li>
<li class="liMenu--list liMenu--list_blue">
S'inscrire
</li>
</ul>
</nav>
</div>
</header>
And here is my CSS
#containerHeader{
flex-wrap: wrap;
}
.navMenu,
.liMenu {
justify-content: center;
padding-right: 80px;
}
.liMenu--list {
list-style: none;
}
.test{
order: -1;
}
.link--navbar {
border-bottom: 4px solid lightgrey;
border-top: none;
padding-bottom: 15px;
}
.link--navbar:hover {
border-top: none;
}
And I put my 2 screenshots ( what it looks like and what I want ) :)
Thanks a lot
img, li {
width: 50%
}
Try adding 50% width to the img and li elements. This will ensure that a single element takes up half the width, which will result in two elements per row.
You may need to use media queries if you want a different look for different devices.
I have a list that displays numbers with decimals. I want them all aligned in the center but they have different decimal lengths so it's kinda causing some UI issues.
Example its current displaying something like
14.88
18.123
20.452
10.22
3.1
Its current HTML & CSS is simply
.my-list {
text-align: center
}
<ul class="my-list">
<li>14.88</li>
</ul>
Can anyone show me how to update my CSS so it displays something like this
14.88
18.123
20.452
etc
In short I want the list to be aligned on the center, but I want the list items to be aligned on the left.
Assuming you want the list itself centered with the items left aligned:
Option 1: Using the list as a block but a fixed width
ul {
padding: 10px;
list-style-type: none;
background-color:#ccc;
width: 25%;
/*Centers the list*/
margin: 0 auto;
}
/*Not required in my example, but you may need it*/
li
{
text-align:left;
}
<ul>
<li>14.88</li>
<li>18.123</li>
<li>20.452</li>
<li>10.22</li>
<li>3.1</li>
</ul>
Option 2: Wrap the list in a div and set the list to inline-block
div {
/*Centers this list*/
text-align: center
}
ul {
padding: 10px;
list-style-type: none;
background-color: #ccc;
display: inline-block;
/*Left align contents of list*/
text-align: left;
}
<div>
<ul>
<li>14.88</li>
<li>18.123</li>
<li>20.452</li>
<li>10.22</li>
<li>3.1</li>
</ul>
</div>
See this article for more centering options: https://css-tricks.com/centering-css-complete-guide/
You are using text-align:center.
Try the same with:
.my-list {
text-align: left
}
This should do it.
You can try list-style css property for the same, to remove the bullets
.myList{
text-align:left;
list-style:none;
}
.mylist{
list-style:none;
width:100px;
}
.mylist li{
text-align:center;
}
<!DOCTYPE html>
<html>
<body>
<ul class="mylist">
<li>14.88</li>
<li>18.123</li>
<li>20.452</li>
<li>10.22</li>
<li>3.1</li>
</ul>
</body>
</html>
I have some bootstrap tabs, which align to the right inside my container:
https://jsfiddle.net/yc2dxnev/
This is the code:
<div class=container>
<ul id="tabs" class="tabs-right tabs">
<li class="banana active"><a>Banana</a></li>
<li class="monkey"><a>Monkey</a></li>
<li class="woods"><a>Woods</a></li>
</ul>
</div>
<style>
ul.tabs a {
display: block;
outline: none;
}
ul.tabs {
list-style: none;
padding: 0;
margin: 0;
display: block;
}
ul.tabs>li {
display: inline-block;
position: relative;
margin-top: 5px;
margin-bottom: -1px;
}
What I want to do is keep the tabs right and make only the left tab stick to the left, but in the same time fill the area to the next tab. It is hard to explain so I posted an image:
http://s16.postimg.org/bhr4qzt51/002.jpg
I do not know how to achieve it, maybe you know a trick.
Your right tabs should be right, so float them to the right using float:right;. Since you want to have the first list item filling the whole space, you have to put it at the end of your ul and add overflow:hidden; to it. Your code would look like this:
<div class="container">
<ul id="tabs" class="tabs-right tabs" data-tabs="tabs" style="">
<li class="monkey"><a>Monkey</a></li>
<li class="woods"><a>Woods</a></li>
<li class="banana active"><a>Banana</a></li> // move this li item to the end
</ul>
</div>
ul.tabs>li.active {
border-bottom-color: #FFF;
background-color: #FFF;
overflow:hidden;
}
.monkey, .woods{
float:right;
}
Have a look at this fiddle.
When I have an unordered list formatted as inline-blocks, the last list element in the list appears to have extra top margin if the other elements have any block content. Take a look at this HTML:
<div id="report_builder">
<ul id="report_layout_1" class="report_layout ui-droppable">
<li rel="recid">Id
<div><input type="text" class="report-column-value"></div>
</li>
<li rel="street1">Address
<div><input type="text" class="report-column-value"></div>
</li>
<li>
Last Field
</li>
</ul>
</div>
Here is the CSS:
#report_builder li {
font-size: 8pt;
}
#report_builder > ul {
float: left;
}
.report_layout {
height: 150px;
}
.report_layout > li {
display: inline-block;
padding: 5px;
margin-left: 2px;
border: 1px solid #ccc;
border-top: 10px solid #ccc;
height: 100px;
background-color:#fff;
}
.report_layout > li:last {
cursor: default;
}
.report_layout > li a {
cursor: pointer;
}
.report_layout > li:nth-child(even) {
background-color:#eee;
}
#report_builder input.report-column-value {
width: 95px;
}
Why does that last list element drop down? Here is a fiddle to demo what I'm doing.
It is weird, but you should force your list items to align to the top using vertical-align: top;. See working version on jsfiddle.
That's because inline-block elements will align as inline, i.e., siblings will use the baseline as the alignment reference.
Elements with inline-block set on them render with a 4 pixel margin to the right.
See this.
It is an issue with the white space between the <li> elements. If you remove the white space, the issue will be resolved.
You could make the li float left and display: inline. They are lined up in your jsfiddle then.
http://jsfiddle.net/eHmtR/1/
I have a couple un-ordered lists on my page. Both lists use list-style: disc inside;. Each list's list-items have a couple div's inside them. The problem is that the list-item's content takes up multiple lines and the disc is appearing vertically, at the bottom of the multi-line list-item.
Here is a screenshot kind of showing the problem I am experiencing. Note that I stole the image from a similar question, it is not my HTML or CSS.
Here is a striped down version of my HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="billing_form">
<div id="purchase_items">
<h2>Your purchase</h2>
<h4>Items:</h4>
<div class="items">
<ul>
<li>
<div class="item">First Product - one year license</div>
<div class="price">$99.00 USD</div>
</li>
<li>
<div class="item">Second product & 3 year Product Plan</div>
<div class="price">$125.00 USD</div>
</li>
</ul>
</div>
<div class="subtotal">SUBTOTAL: $224.00 USD</div>
<h4>Discounts:</h4>
<div class="discount">
<ul>
<li>
<div class="item">A really long discount item name - with extra info on three lines!</div>
<div class="price">- $20.00 USD</div>
</li>
</ul>
</div>
<div class="total">TOTAL: $204.00 USD</div>
</div>
</div>
</body>
</html>
And here is the CSS, as small as I thought was relevant:
html
{
font-family: sans-serif;
}
#billing_form
{
width: 350px;
margin: 0 auto;
font-size: 14px;
background-color: #EEEEEE;
}
#billing_form .items
{
position:relative;
}
#billing_form .discount
{
position:relative;
color:#3665B0;
}
#billing_form ul
{
margin: 0;
padding: 0;
list-style: disc inside;
}
#billing_form .items .item,
#billing_form .discount .item
{
display: inline-block;
width: 190px;
}
#billing_form .price
{
float: right;
padding-left: 20px;
}
#billing_form .items,
#billing_form .discount,
#billing_form .subtotal,
#billing_form .total
{
width: 100%;
}
#billing_form .subtotal,
#billing_form .total
{
text-align: right;
margin-top: 5px;
border-top: 1px solid;
font-weight: bold;
}
#billing_form #purchase_items
{
margin: 10px 10px 10px;
}
I found a similar SO question. Unfortunately, the accepted (and only) answer to it states to try position: relative; and vertical-align: top; but it didn't work for me. I tried it with both #billing_form ul and #billing_form ul li and neither worked. They also mention a IE7 hack fix, but I don't think that is relevant to me because I am experiencing the problem in Firefox 3 & 4 and Google Chrome.
Does anyone know how I can make the list-item bullets (discs) appear at the top of each line item?
It looks like vertical-align: text-top; will do what you want (see spec). I believe the reason is that you are creating tall inline blocks that are aligning to the top of the box which is being pushed up by the tall inline box so aligning to top doesn't do what you want. However, I believe that using text-top will align it with the top of where the text is (and the bullet point).
http://jsfiddle.net/Yayuj/ is a fiddle that does what you want (I believe) and has primarily this updated section from your CSS:
#billing_form .discount .item
{
display: inline-block;
width: 190px;
vertical-align: text-top;
}
Any other differences to what you have pasted above should be cosmetic.