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.
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%;
}
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/
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.
Issue I'm having is the background image on the anchor as a before element needs to move with the text as you resize your screen.
I need the background image to maintain it's position ( e.g left: 20px;) with the text as you resize your screen.
Here is my CSS:
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
ul li {
float: left;
width: 50%;
}
ul li a {
display: block;
padding: 15px 20px;
text-align: center;
text-decoration: none;
font-weight: bold;
position: relative;
color: #717171;
}
ul li a:before {
background: url(http://graphicclouds.com/wp-content/uploads/img/73-google-style-icons-thumb.jpg) no-repeat -11px -26px;
content: '';
display: block;
width: 34px;
height: 33px;
position: absolute;
top: 10px;
}
.link-1:before {
left: 20px;
}
.link-2:before {
left: 0px;
}
Here is a working example: http://jsfiddle.net/2KHS6/
All suggestions welcome
New version:
http://jsfiddle.net/2KHS6/5/
Hope it fills your needs. You might want to set a min-width to avoid problems with small screens though. I did this basically:
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
ul li {
display: inline-block;
width: 50%;
margin: 10px 0;
/* So things don't get crazy */
min-width: 160px;
/* center the child, the <a> */
text-align: center;
}
ul li a {
display: inline-block;
text-decoration: none;
font-weight: bold;
color: #717171;
/* Should be the same height as the img so it stays centered */
line-height: 33px;
}
ul li a:before {
background: url(http://graphicclouds.com/wp-content/uploads/img/73-google-style-icons-thumb.jpg) no-repeat -11px -26px;
content: '';
display: block;
width: 34px;
height: 33px;
position: absolute;
/* position the image at the left of the a. There are many methods to do this actually */
margin: 0 0 0 -50px;
}
I use bootstrap responsive layout and I have an unordered list looks fine in Firefox, Opera, IE except Chrome browser (version 28). In Chrome it looks like this in the picture:
Here is the CSS Styling:
ul {
margin: 20px;
li {
border-bottom: 1px solid #E6E6E6;
div { // the icon
color: #0085AF;
display: inline-block;
font-size: 12px;
width: 10%;
}
p { // the text
display: inline-block;
float: right;
margin-bottom: 0;
width: 89%;
a {
font-family: 'Open Sans',sans-serif;
margin-left: 10px;
}
}
}
}
The reset styling for ul li is:
ul, li {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
I couldn't figure out which setting I should change without breaking the current layout, the text should line up with the icon, and above the border line, not sitting on it! why it's doing this?
use display: block; rather than display: inline-block;