This question already has answers here:
How can I make a div not larger than its contents?
(43 answers)
Closed 11 months ago.
I am trying to style a <ul>'s items. What I am basically trying to do is when i hover the mouse over one <li> a subtle border should appear. But the problem is that the border is taking the entire list's width.
Code is:
li:hover {
border-style: dotted;
border-width: 0.1rem;
}
I have tried to apply display: inline-block or other things that came to me, but didn't manage to make it work.
Current behaviour in this image:
currentBehaviour
What is the solution and what is the cause of the current behaviour? Thank you!
It's because your li is taking the full width of ul tag.
You can use
width: fit-content;
Which will make the li take the length of only the text inside rather than complete ul
Related
This question already has answers here:
Invert rounded corner in CSS?
(10 answers)
Closed 3 years ago.
I am trying to make the following design layout in css/html, but I can't get the inverted border-radius style encircled in blue (BOTTOM-LEFT).
So far, i am using the following css properties in my div:
border-radius: 0 0 0 3rem;
The result is the following:
I have tried to make a margin-top:-3rem of the next div which works but destroys the div height structure for full screen ui and make me change all the weight percentages which is not elegant. Also, I found these tricks from stackoverflow but I don't know how can I get the result based on their code and also it's not simple at all.
Looking for suggestions and easy tricks to achieve this.
Pardon the inline styling but you just need to work with position, z-index and negative margin-bottom
<div style="border-bottom-left-radius: 50px; margin-bottom: -50px; position:relative; z-index: 1; height:150px; background-color: blue;"></div>
<div style="border-bottom-left-radius: 50px; position:relative; z-index: 0; height:150px; background-color: red;"></div>
if you want to make design like the example, just add padding to your div. And it will solve your problem.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I was trying to have a mobile menu for my website. when I apply padding-left: 40px; to ul ul a tag of the menu. It causes to overflow on right side. Can someone give me an advice to solve this issue please.
I know I should handle these codes but I don't know what is problematic
.mobile-menu ul a {
padding-left : 40px;
}
.mobile-menu ul ul a {
padding-left : 60px;
}
I could achieve following so far, and at this point I stuck
jsfiddle
Screenshot
And this is what I try to have:
Screenshot
If you meant to have same widths for "My Account" and "Cart", you can remove the ul around the Cart. That is a new list inside a list item and that is causing to change the width.
Updated jsFiddle
If you ment to have all the menu items in same width...
Why the child element is longer than the first one?
Because of the browser default -webkit-padding-start CSS property. FYA, it is set to 40px.
How could I achieve that they will have same width?
Set padding: 0 on the ul.
.mobile-menu ul {
padding: 0;
}
Another Version jsFiddle
Set the width of the containing element, in this case the top level ul.
What you are doing currently is setting a width on ALL the anchors, no matter what level they are in.
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 6 years ago.
I have a jsfiddle here - https://jsfiddle.net/3sph9wpg/5/
Super simple I have a list with display:inline; to create a horizontal nav
I want a bar between each element which I can add with after
My problem is I seem to have a space after the bar that I cant remove
I need to add a space inside the which I don't like doing
ul{
list-style: none;
li{
display: inline-block;
&:after{
content: "|";
}
}
}
This is not related to the ::after - it's because display: inline-block causes the white space between nodes (i.e. between one closing tag and the next opening tag) to be parsed as a single space.
There's several ways round this. Since the size of the added space is dictated by the inherited font size, one approach is to set a font size of 0 on the parent ul.
CSS:
ul { font-size: 0; }
Output:
one|two|three
No whitespace will now show between the nodes. However, this can cause problems of the LIs have a relative font size set in ems. Using pixels or rem's gets round this problem.
Fiddle.
Another approach is to use floats rather than inline-block, which doesn't suffer from this problem.
li { float: left; }
Fiddle.
This is a common issue when using display: inline-block and having an extra line in your code. To fix the extra space just use font-size:0; on the parent ul element. You will then need to reset the font size to the value of your choice in this li.
https://jsfiddle.net/8vhqyxxr/
It's the actual white space (line break in this case) between the li elements. It's because they are inline block elements.
If you remove the breaks, the spaces are gone:
https://jsfiddle.net/3sph9wpg/9/
There are other possibilities, like messing around with the font-size. A font-size 0 results in zero-width spaces, so you could set font-size: 0 on the ul. But unfortunately, there is no way to properly 'restore' the font size of the li relative to the ul's parent, so you will have to give the li elements an explicit font size, which can be ugly.
Another solution, also not pretty, is putting the whitespace inside the tags, so it is ignored, like so:
https://jsfiddle.net/3sph9wpg/10/
A similar problem is often found when you want to display multiple images (also inline-block elements) on a single line, and I'm sure that you can find numerous solutions for that problem that also apply to yours, but most, if not all of them, will be hacky-ish solutions like the ones mentioned above.
You can use css attribute letter-spacing on the ::after pseudo element itself to correct it like this:
ul {
li {
display: inline-block;
&:after {
content: "|";
letter-spacing: -3px;
}
}
}
Fiddle: https://jsfiddle.net/thepio/Lz8z11yw/1/
Browser support for letter-spacing: http://caniuse.com/#search=letter-spacing
This question already has answers here:
Why does this inline-block element have content that is not vertically aligned
(4 answers)
Closed 6 years ago.
I have this weird situation where the text VanillaJs Cookbook is forcing the Booking Calendar text to horizontally align with the text cookbook. Is there any way to fix this? You can see the black gap that exists above Booking Calendar.
The child elements of your <nav> seem to be positioned "inline" (which can happen by css properties like display: inline, display: inline-block but also float: left, float: right (in a slightly different way).
But there could also be many more reasons for the result your screenshot shows. I am pretty sure that the <a> with booking calendar isn't aligned directly to the <span> with cookbook! in it. It only accidently looks as if it was.
For a first shot you could try to apply the following rule on the <nav>-element and/or the <ul> and their child <li> and their child <a>, just try and see how the elements alignment changes:
nav {
vertical-align: top;
}
ul,
ul li,
ul li a {
vertical-align-top:
}
Also check the padding of the <li> and its inner <a> by giving it a specifig padding-top, e.g. padding-top: 0px;
Please give some more info about the css that applies to the elements for further help.
This is happening because these elements automatically align to the bottom of their parent.
What I recommend if you're not wanting this behavior is to float both the "article" and the "ul" elements.
This will allow you to move these elements more freely.
However, you will then need to specify a width and height for the entire nav.
Here's an example:
https://jsfiddle.net/sL1w49h1/
The styles:
nav {
width: 100%;
height: 150px;
}
article,
ul {
float: left;
}
ul li {
list-style-type: none;
}
.calendar {
margin-top: 24px;
}
I have an background image for a menu bar as follows
and it has four constant text displayed on each of the box. right most box is empty place. This image is made with all those static four vertical bars.
Now the problem is those four texts are so dynamic and are of variable lengths for different situation. Because of the variable lengths, its overlapping with those vertical bars when the texts not able to accommodate inside the box.
What is the best option to deal with this scenario using styling or another way.?
Thanks in advance.
Case 1: Using Borders
You can give the links a border-right instead of relying on the image.
.nav li a {border-right: 2px solid #000;}
Case 2: Using Ellipsis
You can give a text-ellipsis for those links and make sure they come fit inside the lines:
.nav li a {max-width: 150px; text-ellipsis: ellipsis; overflow: hidden; display: inline-block;} /* Get this thing right */