I have a list like this:
<ul>
<li class="list-item">
<span>Label</span>
<div class="multi-line-content">
multi-<br />
line<br />
content
</div>
</li>
<li class="list-item">
<span>Label</span>
<div class="multi-line-content">
multi-<br />
line<br />
content
</div>
</li>
<li class="list-item">
<span>Label</span>
<div class="multi-line-content">
multi-<br />
line<br />
content
</div>
</li>
</ul>
with this CSS:
.list-item > * {
vertical-align: top;
}
.multi-line-content {
display: inline-block;
border: 1px solid black;
}
which produces output that looks like this (jsfiddle):
I need to style the background where the list bullets are, such that it would look something like this:
I've tried setting a border on the UL, but this extends to the bottom of the whole list (including the "multi-line content" divs), which is not the desired look. The background should not extend below the bottom of the last "Label" line. I am looking for suggestions for CSS tricks to make this work, or alternative CSS/HTML structures that would produce the same output. The solution should work for any number of <li> elements, and ideally be pure CSS/HTML.
Any ideas?
Here's an approach that doesn't require changes to your markup or height statements.
.list-item > * {
vertical-align: top;
}
.multi-line-content {
display: inline-block;
border: 1px solid black;
}
li {
border-left: 12px solid;
}
li:last-child {
border: none;
margin-left: 12px;
}
li > span {
border-left: 12px solid;
padding-left: 8px;
margin-left: -12px;
}
ul {
list-style-type: none;
}
<ul>
<li class="list-item"> <span>Label</span>
<div class="multi-line-content">multi-
<br />line
<br />content</div>
</li>
<li class="list-item"> <span>Label</span>
<div class="multi-line-content">multi-
<br />line
<br />content</div>
</li>
<li class="list-item"> <span>Label</span>
<div class="multi-line-content">multi-
<br />line
<br />content</div>
</li>
</ul>
Here you go:
.list-item {
border-left: 10px solid black;
list-style: none;
padding-left: 10px;
}
ul li:last-child{
height: 15px;
}
jsfiddle
The following will give you the look you're after. You'll need to check it works in key browsers your users will have.
<html>
<head>
<style>
ul {
list-style-type: none;
padding-left: 5px;
margin: 0px;
background-color: black;
}
.list-item {
vertical-align: top;
background-color: white;
}
.multi-line-content {
display: inline-block;
border: 1px solid black;
}
</style>
</head>
<body>
<ul>
<li class="list-item">
<span>Label</span>
<div class="multi-line-content">
multi-<br />
line<br />
content
</div>
</li>
<li class="list-item">
<span>Label</span>
<div class="multi-line-content">
multi-<br />
line<br />
content
</div>
</li>
<li class="list-item">
<span>Label</span>
<div class="multi-line-content">
multi-<br />
line<br />
content
</div>
</li>
</ul>
</body>
</html>
You can add another div in your li and work with it like this:
HTML
<ul>
<div class="a">
<li class="list-item">
<span>Label</span>
<div class="multi-line-content">
multi-<br />
line<br />
content
</div>
</li></div>
<div class="a">
<li class="list-item">
<span>Label</span>
<div class="multi-line-content">
multi-<br />
line<br />
content
</div>
</li></div>
<li class="list-item">
<div class="b">
<span>Label</span></div>
<div class="multi-line-content">
multi-<br />
line<br />
content
</div>
</li>
</ul>
CSS:
.list-item > * {
vertical-align: top;
}
.list-item{ list-style-type: none;}
.a{border-left:5px solid red;padding-left:7px;}
.b{border-left:5px solid red;padding-left:7px;display: inline;}
.multi-line-content {
display: inline-block;
border: 1px solid black;
}
I don't know if this is what you're looking for, maybe you just want a fancier solution, but this works.I also have added some paragraphs after the list to check if this break the layout.
Have a look on this FIDDLE
Related
Would create a list of items and align icon at the right.
<ul class=" list">
<li *ngFor="let group of groupList">
<div class="list-item"><span>{{ group.name }} (ID {{group.code}} ) </span></div>
<div class="trash-icon">
<img src="assets/img/icon_trash.png" height="20" width="20"/>
</div>
</li>
</ul>
In CSS:
.list-item {
width: 300px;
display : inline-block;
}
.trash-icon {
float: right;
}
.trash-icon::after {
clear: both;
}
The first line is aligned correctly, however, the following lines are indented.
Here's a screenshot:
When I replace float by right align:
Use the flexbox display for that.
<ul class="list">
<li *ngFor="let group of groupList">
<div class="list-item"><span>{{ group.name }} (ID {{group.code}} ) </span></div>
<div class="trash-icon"><img src="assets/img/icon_trash.png" height="20" width="20"/></div>
</li>
</ul>
Your styles
ul.list li {
display: flex;
justify-content: center;
}
ul.list li div.list-item {
flex: 1 1 auto;
}
ul.list li div.trash-icon {
flex: 0 0 20px;
}
have you tried to replace .trash-icon float with text-align
The answer to the original question
You don't really need ::after pseudoclass when you want to clear floated items, you can just do the following:
.trash-icon {
float: right;
clear: both;
}
And here is the example:
.list-item {
width: 300px;
display : inline-block;
}
.trash-icon {
float: right;
clear: both;
}
<li>
<div class="list-item">
<span>SPAN 1</span>
</div>
<div class="trash-icon">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/rss_circle_color-256.png" height="20" width="20"/>
</div>
</li>
<li>
<div class="list-item">
<span>SPAN 2</span>
</div>
<div class="trash-icon">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/rss_circle_color-256.png" height="20" width="20"/>
</div>
</li>
<li>
<div class="list-item">
<span>SPAN 3</span>
</div>
<div class="trash-icon">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/rss_circle_color-256.png" height="20" width="20"/>
</div>
</li>
.item_one_image {
border: 1px solid #ccc;
width: 160px;
padding: 4px 0px 10px 14px;
height: 250px;
}
<div class="article">
<div id="title_1">
</div>
<div class="item_one_image">
<img src="#" />
</div>
<div class="description_box_1">
<div class="price_1">
<span>PRICE:</span>
</div>
<li class="description_os">
<ul>OS</ul>
</li>
<li class="descrption_ram">
<ul>RAM</ul>
</li>
<li class="descrption_storage">
<ul>STORAGE</ul>
</li>
</div>
</div>
I want to add price,OS,RAM right beside phone image.
Here is my image:demo-one
I have tried:
float:right;
margin:
with float property im able to move it to right side but with margin im not able to move it up and left.
Even if i manage to move it to right beside image,it breaks on smaller sized devices.
.item_one_image {
border: 1px solid #ccc;
width: 160px;
padding: 4px 0px 10px 14px;
height: 250px;
float:left;
}
.description_box_1{
float:left;
margin-left:25px;
}
ul{
margin:0;
}
<div class="article">
<div id="title_1">
</div>
<div class="item_one_image">
<img src="#" />
</div>
<div class="description_box_1">
<div class="price_1">
<span>PRICE:</span>
</div>
<ul>
<li class="description_os">
OS
</li>
<li class="description_ram">
Ram
</li>
<li class="description_storage">
Storage
</li>
</ul>
</div>
</div>
You have put ul in li , which is wrong.
ul is a parent of li , so li must be in ul.
Is this the same that you want?
Hope this helps.
To keep the image and text on 1 line, here is 2 good solutions that does, even on smaller devices.
Note, since an ul need a li, I removed your inner ul's
First, the most classical one, using BFC float on the image and a margin-left on the text.
This avoid issues like white spaces with inline block and width calculation when using float, or inline-block, on both elements.
.item_one_image {
border: 1px solid #ccc;
width: 160px;
padding: 4px 0px 10px 14px;
height: 250px;
float: left;
}
.description_box_1 {
margin-left: 176px; /* 160px width + 14px padding + 1px + 1px border */
}
<div class="article">
<div id="title_1">
</div>
<div class="item_one_image">
<img src="http://lorempixel.com/160/250/technics/7/" />
</div>
<div class="description_box_1">
<div class="price_1">
<span>PRICE:</span>
</div>
<ul>
<li class="description_os">
OS
</li>
<li class="descrption_ram">
RAM
</li>
<li class="descrption_storage">
STORAGE
</li>
</ul>
</div>
</div>
Second, a more modern solution, using Flexbox
.article {
display: flex;
}
.item_one_image {
border: 1px solid #ccc;
padding: 4px 0px 10px 14px;
}
.description_box_1 {
flex: 1; /* take all the remaining space */
}
<div class="article">
<div id="title_1">
</div>
<div class="item_one_image">
<img src="http://lorempixel.com/160/250/technics/7/" />
</div>
<div class="description_box_1">
<div class="price_1">
<span>PRICE:</span>
</div>
<ul>
<li class="description_os">
OS
</li>
<li class="descrption_ram">
RAM
</li>
<li class="descrption_storage">
STORAGE
</li>
</ul>
</div>
</div>
List item element of html tags should be covered by your unordered list element, that means, "ul" tag should have children elements as "li"
<div class="article">
<div id="title_1">
</div>
<div class="item_one_image">
<img src="#" />
</div>
<div class="description_box_1">
<div class="price_1">
<span>PRICE:</span>
</div>
<ul>
</ul>
<li class="description_os">
OS
</li>
<li class="descrption_ram">
RAM
</li>
<li class="descrption_storage">
STORAGE
</li>
</div>
</div>
.item_one_image {
border: 1px solid #ccc;
width: 160px;
padding: 4px 0px 10px 14px;
height: 250px;
float:left;
}
.description_box_1{
float:left;
margin-left: 10px;
}
https://fiddle.jshell.net/hofh146n/
Just add .item_one_image, .description_box_1 { float: left; } code in to your CSS. And change the ul,li structure. Refer code from following HTML section.
.item_one_image {
border: 1px solid #ccc;
width: 160px;
padding: 4px 0px 10px 14px;
height: 250px;
}
.item_one_image, .description_box_1 {
float: left;
}
<div class="article">
<div id="title_1">
</div>
<div class="item_one_image">
<img src="#" alt="demo image" />
</div>
<div class="description_box_1">
<div class="price_1">
<span>PRICE:</span>
</div>
<ul>
<li class="description_os"> OS </li>
<li class="descrption_ram"> RAM </li>
<li class="descrption_storage"> STORAGE </li>
</ul>
</div>
</div>
I am trying to have the 3 unordered list items take up the whole block spaced out evenly, with the 1st one at the start the 2nd one in the middle and the last one touching the end of the block.
I am trying to do it with flex box but currently I am having difficulty, I figured justify-content: would work for this task, but its not doing anything.
Here is the end result I am trying to achieve:
link to codepen
Example:
body {
background: green;
}
.area--third-amenities--list {
width: 375px;
background: blue;
}
ul {
padding: 0;
list-style-type: none;
margin: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
ul li {}
<div class="area--third-amenities--list">
<ul>
<li>
<img src="http://i.imgur.com/PwKgUnO.png" />
<p>
50px
</p>
</li>
<li>
<img src="http://i.imgur.com/PwKgUnO.png" />
<p>
50px
</p>
</li>
<li>
<img src="http://i.imgur.com/PwKgUnO.png" />
<p>
50px
</p>
</li>
<li>
<img src="http://i.imgur.com/PwKgUnO.png" />
<p>
50px
</p>
</li>
<li>
<img src="http://i.imgur.com/PwKgUnO.png" />
<p>
50px
</p>
</li>
<li>
<img src="http://i.imgur.com/PwKgUnO.png" />
<p>
50px
</p>
</li>
</ul>
</div>
you could use flex-basis:33.33% on the lis so they stay 3 on one line and text-align:center
body {
background: green;
}
.area--third-amenities--list {
width: 375px;
background: blue;
}
ul {
padding: 0;
list-style-type: none;
margin: 0;
display: flex;
flex-wrap: wrap;
text-align:center;
}
ul li {
flex-basis: 33.33%;
}
<div class="area--third-amenities--list">
<ul>
<li>
<img src="http://i.imgur.com/PwKgUnO.png" />
<p>
50px
</p>
</li>
<li>
<img src="http://i.imgur.com/PwKgUnO.png" />
<p>
50px
</p>
</li>
<li>
<img src="http://i.imgur.com/PwKgUnO.png" />
<p>
50px
</p>
</li>
<li>
<img src="http://i.imgur.com/PwKgUnO.png" />
<p>
50px
</p>
</li>
<li>
<img src="http://i.imgur.com/PwKgUnO.png" />
<p>
50px
</p>
</li>
<li>
<img src="http://i.imgur.com/PwKgUnO.png" />
<p>
50px
</p>
</li>
</ul>
</div>
let me know if this helps
You can use text-align: center on the li..
li
flex: 1 1 100px
text-align: center
http://codepen.io/anon/pen/bqJKwK
I have a list of items with a div content and a span with check box. I want to position my check box span to center of li element.
<li class="e-list e-state-default e-list-check">
<div class="cont-bg">
content here varies
</div>
<span >
<input class="e-lv-check e-checkbox e-js e-input" type="checkbox"/>
</span>
</li>
Content is loaded dynamically so its height and width varies. I couldn't set padding for positioning. Tried on positioning using vertical-align as well. Nothing worked.
.e-list.e-state-default {
background-color: #fff;
border-color: #c8c8c8;
}
.e-list {
border-bottom: 1px solid #c8c8c8;
font-size: 12px;
}
.cont-bg {
font-size: 17px;
height: 100px;
padding-left: 5px;
padding-top: 10px;
width: 80%;
display: inline-block;
}
.e-list .e-lv-checkdiv {
float: right;
}
.e-list {
border-bottom: 1px solid #c8c8c8;
font-size: 12px;
}
.e-list {
line-height: normal;
padding: 0 15px;
cursor: pointer;
vertical-align: middle;
}
<ul>
<li class="e-list e-state-default e-list-check">
<div class="cont-bg">
<div class="brooke">
</div>
<div class="listrightdiv">
<span class="templatetext">Brooke</span> <span class="designationstyle">HR Assistant</span>
<div class="aboutstyle">
Brooke provides administrative support to the HR office. Brooke provides administrative support to the HR office. Brooke provides administrative support to the HR office.
</div>
</div>
</div>
<span><input class="e-lv-check e-checkbox e-js e-input" type="checkbox" tabindex="" name="null" value="true" /> </span>
</li>
<li class="e-list e-state-default e-list-check">
<div class="cont-bg">
<div class="brooke">
</div>
<div class="listrightdiv">
<span class="templatetext">Brooke</span> <span class="designationstyle">HR Assistant</span>
<div class="aboutstyle">
Brooke provides administrative support to the HR office. Brooke provides administrative support to the HR office. Brooke provides administrative support to the HR office.
</div>
</div>
</div>
<span><input class="e-lv-check e-checkbox e-js e-input" type="checkbox" tabindex="" name="null" value="true" /> </span>
</li>
</ul>
Can any one help me?
Why are you mixing <div> and <span>? Having both in span will give you right results right? You can use something like this:
.e-list,
.e-list span {vertical-align: middle; text-align: center;}
<li class="e-list e-state-default e-list-check">
<span class="cont-bg">
content here varies
</span>
<span>
<input class="e-lv-check e-checkbox e-js e-input" type="checkbox"/> This is centered.
</span>
</li>
If for some reason, you cannot change your <div> to <span>, use:
.e-list {vertical-align: middle; text-align: center;}
.e-list div,
.e-list span {vertical-align: middle; text-align: center; display: inline-block;}
<li class="e-list e-state-default e-list-check">
<div class="cont-bg">
content here varies
</div>
<span>
<input class="e-lv-check e-checkbox e-js e-input" type="checkbox"/> This is centered.
</span>
</li>
Here are my CSS and HTML codes respectively :
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #55AAFF;
}
li {
float: left;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #1D72C7;
}
.indextext
{
font-family: roboto, arial, calibri, sans-serif;
text-align: center;
padding: 50px 150px 0px 150px;
}
<html>
<head>
<title>Welcome - Bookmark Designs - Web Design Solutions</title>
<link href="C:\Users\Raj\Desktop\New folder\homepage_css.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="logoimg">
<img src="" </img>
</div>
<div class="nav"
<ul>
<li id=1>Home</li>
<li id=2>Portfolio</li>
<li id=3>Prices</li>
<li id=4>Contact Us</li>
<li id=5>About Us</li>
</ul>
</div>
<div class="mainimg">
<img src="" />
</div>
<div class="indextext">
<p>TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText</p>
</div>
I've provided a link to the output below. Also, how do I stop those bullet points from appearing?
I've tried long and hard and racked my limited knowledge to what may be causing this and did a lot of trial and error but most things I tried kept worsening things.
Thank you very much.
<div class="logoimg">
<img src="">
</div>
<div class="nav">
<ul>
<li id=1>Home</li>
<li id=2>Portfolio</li>
<li id=3>Prices</li>
<li id=4>Contact Us</li>
<li id=5>About Us</li>
</ul>
</div>
<div class="mainimg">
<img src="">
</div>
<div class="indextext">
<p>TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText</p>
</div>
img tags don't have closing </img>
You were missing a closing > on a div
Put your id attribute values inside quotes
Fiddle: https://jsfiddle.net/zhtq9jn9/1/