I have a list, which leaves some spaces for indentation purposes and also provides dashed underlying. However the display properties used for this list do no match, causes the text to change line when a space is found. Here is a Fiddle.
The CSS:
.dashed {
display: block;
width: 100%;
height: 90%;
border-bottom: dashed 2px #54687a;
}
li {
display: table-row;
}
li span {
display: table-cell;
padding-right: 1em;
}
I tried to keep only one display property, but that failed. Anyone has a fix for this please?
Let's speak with images!
What happens now - it's the problem:
Desired result:
Remove the dashed class, and add these styles:
li span:after {
content: '';
position: absolute;
display: block;
width: 90%;
margin-left: -12px; /* compensate for padding-left: 12px; */
border-bottom: dashed 2px #54687a;
}
Fiddle
Are you trying to get it so that everything is in one line, like this?
Name: Charis Spiropoulos
If so, try this:
li span {
display: inline-block;
padding-right: 1em;
}
I just updated your fiddle
I added in your CSS
ul li span {
background: url("../img/arrow.png") 0 50% no-repeat;
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/arrow.svg") 0 50% no-repeat;
list-style-type: none;
padding-left: 12px;
display: inline-block; // added or it can be inline
}
You'll likely have better luck with display: block; on the list items and display: inline-block; on the span. table-cell is causing the line to wrap around.
li {
display: display;
padding: 10px 0px; /* modify as desired */
}
li span {
width: 50px; /* Set width as needed so the names line up, even if the span text is different lengths */
display: inline-block;
padding-right: 1em;
}
http://jsfiddle.net/daCrosby/cmfL2643/18/
UPDATED - Final css should be like
ul li span {
background: url("../img/arrow.png") 0 50% no-repeat;
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/arrow.svg") 0 50% no-repeat;
list-style-type: none;
padding-left: 12px;
}
.dashed {
border-bottom: 2px dashed #54687a;
display: block;
width: 58%;
margin-bottom:10px;
}
li {
display: table-row;
padding-bottom:5px;
}
li span {
display: inline-block;
padding-right: 1em;
width:23%;
}
Check the UPDATED demo - http://jsfiddle.net/cmfL2643/21/
Related
I want to have a Tags input (just like the stackoverflow's one) where users can type their chosen tags and it shows inside the input.
I decided to do it inside of a ul where the input is the last li:
<ul class="tag-box">
<li class="tags" *ngFor="let tag of tags">{{tag.name}}<a class="close"></a></li>
<li class="new-tag"><input class="input-tag" type="text"></li>
</ul>
But the problem is the width of the input is always small by default while I want it to take all the remaining width:
my css:
.tag-box {
list-style: none;
padding: 3px;
margin: 0;
display: inline-block;
font-family: arial;
width: 100%;
border: 1px solid #F39F19;
border-radius: 4px;
}
.tag-box li {
padding: 4px 6px;
float: left;
display: inline-block;
}
.tag-box li.tags {
background: #F1C617;
color: #fff;
border-radius: 4px;
margin: 4px 3px;
position: relative;
}
.tag-box li .input-tag {
color: #000;
height: 24px;
vertical-align: middle;
border: none;
outline: none;
background: none;
}
Is there a way where my input my input can take whatever left of space as width according to the loop?
Here's one way you could do it, I'm adding 3 things. You'll eventually want to give it a min-width and make it wrap though.
.tag-box {
display: flex;
}
.tag-box .new-tag {
flex: 1
}
.tag-box li .input-tag {
width: 100%;
}
Okay, so I am trying to align 5 list items in a row of width 980px.Each of the 5 list items have an anchor tag in them.The anchor tags have a fixed width of 184px and there is 15px padding between two list items.But it is working only in Chrome and Safari. The width in Firefox and IE browsers are showing up as 186px though I have given the fixed width. So,the last list item is coming in to a second row which is not what I wanted.
li {
list-style: none;
float: left;
content-align: center;
padding-right: 15px;
display: table-cell;
a{
width: 184px;
height: 230px;
span{
padding-top: 161px;
padding-right: 8px;
padding-left: 8px;
}
}
a:hover {
text-decoration: none;
}
}
li:last-child{
padding-right:0;
}
Can't understand why this is working only for two browswers
That is because <a> tag is inline by default and cannot accept height or width properties, you have to make it a block.
Also why are you using display: table-cell for the lis?
This code should work (SCSS):
ul {
width: 980px;
background:red;
list-style: none;
margin: 0;
padding: 0;
}
li {
float: left;
display: block;
padding-right: 15px;
background: blue;
&:last-child {
padding-right: 0;
}
a {
width: 184px;
height: 230px;
color: #FFF;
display: block;
span {
padding-top: 161px;
padding-right: 8px;
padding-left: 8px;
}
&:hover {
text-decoration: none;
}
}
}
See my jsFiddle.
For the header of a website, I want to center an element and have to rows of links float against it from both sides. The rows are not the same length, so I can't just center the whole menu.
It's easier to see than to explain, so here's an image and a fiddle of the effect I want to achieve.
http://jsbin.com/katuroxi/11/edit
The fiddle however uses the new flexbox, which I would like to (if possible) avoid.
Is there a way to do this without them?
You can do it like this:
.parent {
display: table;
table-layout:fixed;
padding: 0;
font-size:0px;
width:100%;
}
ul {
padding: 0;
margin: 0;
}
.left, .right, .fix {
display:table-cell;
}
.left {
text-align: right;
}
li {
list-style: none;
display: inline-block;
border: 1px solid red;
font-size:16px;
}
.fix {
text-align: center;
border: 1px solid red;
width: 120px;
font-size:16px;
}
What this does is:
add display:table to the .parent and make it render with table-like logic and make it 100%.
add display:table-cell to .left, .right, .fix so it will render like a table cell. Because of this, each cell will take 33% of the table width.
add font-size:0px to the .parent to remove the white space between display:inline-block elements.
set the font-size back to the desired value in the elements where we have the text.
You could use all elements as display:inline; (or display:inline-block if you want some padding) and text-align:center; on the .parent
.parent {
padding: 0;
width: 100%;
text-align: center;
}
ul {
padding: 0;
margin: 0;
display: inline;
}
.left, .right, .fix {
display: inline;
text-align: center;
}
li, .fix {
list-style: none;
border: 1px solid red;
display: inline;
}
http://jsbin.com/katuroxi/12/edit
I've setup a list where each list element contains two container: a title and a description container. What I need is to show dots at the bottom of each line.
It's working fine in Chrome and Safari. But unfortunately it doesn't work in firefox.
jsfiddle
Any suggestions on how to make this also work in firefox?
ul.basic {
display: table;
overflow: hidden;
}
ul.basic li {
position: relative;
display: table-row;
}
ul.basic li .title, ul.basic li .description {
display: table-cell;
background-color: #fff;
}
ul.basic li .title {
color: #999;
position: relative;
overflow: hidden;
padding-right: 60px;
}
ul.basic li .title span {
position: relative;
z-index: 10;
background-color: #fff;
}
ul.basic li .title:after {
content: '....................................................................... .......................................................................................................................................... ....................................................................................................................................... .............................................................................................................................................................................................';
position: absolute;
width: 300%;
margin-left: -100%;
word-wrap: break-word;
}
ul.basic li .description {
padding-left: 2px;
color: #000;
}
I see 2 behaviour really different between FF and CHrome. Aniway why don't just use a
border-bottom: 1px dotted;
as css rule for css .description ? (also for .title if you need)
I had to use an image to display the desired result properly in all browsers.
I have setup a fiddle: http://jsfiddle.net/BaWC8/2/
You can see that I have a wrapper div containing an ul with li's. The li's have a with of 25% so they get evenly spread across the 'page'. The wrapping div has a border of 1px. Since all li's also have a border of 1px, it looks like they all have a border of 2px (which I want).
Now. This looks all good on a desktop but when you open it on a mobile device (iphone, android) you see a small spacing on the right side of the wrapper between the last li and the wrapper border.
Here is the code (html):
<div class="wrap">
<ul>
<li><span>aaaa</span></li>
<li><span>bbbb</span></li>
<li><span>cccc</span></li>
<li><span>dddd</span></li>
</ul>
</div>
Css:
body{
text-align: center;
background: #000;
}
.wrap {
margin: 0px auto;
border: 1px solid #fff;
float: left;
width: 100%;
}
.wrap ul {
list-style: none;
margin: 0px;
padding: 0px;
float: left;
width: 100%;
}
.wrap ul li {
display: list-item;
float: left;
margin: 0px;
padding: 0px;
width: 25%;
}
.wrap ul li a {
display: block;
border: 1px solid #fff;
}
.wrap il li a span {
width: 100%;
height: 100%;
float: left;
display: block;
}
I do not understand why so I hope someone here can help me out.
Remove the float and width from the .wrap and ul.
The border will on .wrap will collapse, which you can either solve with a clearfix, or by adding overflow:auto.
Here is my working CSS:
body {
text-align: center;
background: #000;
}
.wrap {
margin: 0px auto;
border: 1px solid #fff;
overflow:auto;
}
.wrap ul {
list-style: none;
margin: 0px;
padding: 0px;
}
.wrap ul li {
display: list-item;
float: left;
margin: 0px;
padding: 0px;
width: 25%;
}
.wrap ul li a {
display: block;
border: 1px solid #fff;
}
.wrap il li a span {
width: 100%;
height: 100%;
float: left;
display: block;
}
A working fiddle, at least on iOS: http://jsfiddle.net/designingsean/BaWC8/7/
You see a small spacing because .wrap width is 100%+2px(border-width*2).
If you want border (or padding) don't expand element's width/height,
you may use box-sizing: border-box; http://css-tricks.com/box-sizing/
add this css-property to .wrap and you will not see "small spacing" anymore))