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 7 years ago.
Improve this question
I'm having some trouble trying to keep a list horizontal, I haven't been able to find it anywhere and white-space: nowrap doesn't work. I don't mind the 4 items being underneath the text after a certain screen size but it's gotta be horizontal still, in this case it goes vertical and I can't figure out why, there's my fiddle try out yourself by re-sizing and you'll what I mean!
<div class="menu">
<h2>
This is a text
</h2>
<ul>
<li><a>Test1</a></li>
<li><a>Test2</a></li>
<li><a>Test3</a></li>
<li><a>Test4</a></li>
</ul>
</div>
JS Fiddle
Please only css or html fixes!
Thank you!
h2 {
display: inline;
}
ul {
text-align: right;
margin-right: 100px;
white-space: nowrap;
}
li {
display: inline-block;
}
a {
padding: 14px 16px;
}
<div class="menu">
<h2>
This is a text
</h2>
<ul>
<li><a>Test1</a></li>
<li><a>Test2</a></li>
<li><a>Test3</a></li>
<li><a>Test4</a></li>
</ul>
</div>
float is not your friend
Just change your ul and li styles to looks as follows:
ul {
margin-right: 100px;
white-space: nowrap;
text-align: right;
}
li {
display: inline-block;
}
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
I've an issue with the order in a navigation bar to recreate the Google page with a proper order.
I tried flex-direction: row-reverse; but it changed nothing.
I try this:
<style>
.navbar li{
display: flex;
flex-direction: row;
list-style-type: none;
float: right;
margin: 10px;
}
</style>
<body>
<nav class="navbar">
<ul>
<li><a>Gmail</a></li>
<li><a>Images</a></li>
<li><img src="/images/app.jpg"></li>
<li><img src="/images/icone.jpg"></li>
</ul>
</nav>
</body>
You need to change .navbar li to .navbar ul. The problem is that you are trying to set the li elements as flex containers. But since they don't contain anything, it's not doing anything. Instead, each list item is getting floated to the right, which naturally reverses their order. Note, however, that you'll probably still want margin: 10px to remain on the li elements. Here is a modified example:
.navbar ul {
display: flex;
list-style-type: none;
float: right;
}
.navbar li {
margin: 10px;
}
<body>
<nav class="navbar">
<ul>
<li><a>Gmail</a></li>
<li><a>Images</a></li>
<li><img src="https://via.placeholder.com/32"/></li>
<li><img src="https://via.placeholder.com/32"/></li>
</ul>
</nav>
</body>
You are editing the li not the ul.
You need to have the styles on the ul and not the li elements:
.navbar ul {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I'm trying to create a horizontal list that isn't precisely aligned, exactly like this: http://i.imgur.com/G8xWymZ.png (horizontal and scattered)
Here's what I've got so far:
HTML
<nav>
<ul id="menu">
<li>Random</li>
<li>Stand</li>
<li><a href="#>NAN</a></li>
<li>Tap</li>
<li>Mart</li>
<li>Dom</li>
</ul>
</nav>
CSS
nav {
position: relative;
top: 25px;
left: 290px;
}
nav ul
{
margin: 0;
padding: 0;
list-style-type: none;
underline: none;
}
nav ul li { display: inline; margin: 0px 20px 0px 0px;}
nav ul li a { color: red; font-size: 14px; text-decoration: none;}
As you can see, although the list is horizontal it is not 'unordered'/scattered as in the image. Any suggestions?
You can position the <li>-elements manually with position: relative and the position properties top, right, bottom, left. I have written a little example for you here: https://jsfiddle.net/c5bw1dbe/
I hope this helps!
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 8 years ago.
Improve this question
So I'm trying to make my navbar list items have a border on each side, but I want them still to be connected just like this:
http://prntscr.com/4wa4q4
When I try to add the border to both sides, they're spaced out and with no margin the 2 borders on each list item are together. How could I do it like in the picture?
http://jsfiddle.net/9Leecphh/
HTML:
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
CSS:
ul{
list-style: none;
}
ul li:first-child{
border-left: 1px solid gray;
}
ul li{
border-right: 1px solid gray;
display: table-cell;
padding: 5px 20px;
color: #FFF;
background: #000;
margin: 0;
}
Just add border-right on your li and border-left on li:first child. Then you can get it like in the screenshot.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
Here is my CodePen: http://codepen.io/ScottBeeson/pen/rxquJ
So basically when you hover over an entity, a menu slides up. I'm trying to create a submenu for each menu item that basically mirrors the menu functionality, but slides down from the bottom of the menu. Here is an image of what it should look like:
And here is my current HTML:
<div class="entity">
<span class="menu"><div>A</div><div>B</div><div>C</div></span>
</div>
I can think of a couple ways to do this with JQuery, but I'm wondering if it's possible to do with CSS. Obviously, populating the menu will be via javascript, but I'm trying to use CSS as much as possible. So to put it in question form: If I put a static div with a class of "submenu" inside my entity, is there any way with CSS/LESS to trigger it when I hover over a div inside the menu?
I don't use LESS, so I can't help you with that.
However, I made you this code, which displays the menu on hover, and the submenu when you hover the menu items. You could set up the structure for a entity like this:
<div class="entity">
<ul>
<li>A
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
<li>B
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
<li>C</li>
</ul>
</div>
And combine it with this CSS:
.entity {
margin: 5px;
position: relative;
display: inline-block;
width: 260px;
height: 200px;
background-color: lightblue;
}
.entity ul {
display: none;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
width: 100%;
background-color: rgb(0,0,0); /*fallback*/
background-color: rgba(0,0,0,.5);
bottom: 0px;
}
.entity li:hover {
background: black;
color: white;
}
.entity:hover > ul { /* only display direct ul child of .entity */
display: block;
}
.entity li {
display: inline-block;
padding: 10px;
}
.entity li > ul {
background: black;
}
.entity li:hover > ul {
display: block;
left: 0;
bottom: -100%;
}
I hope you can add the smooth effects yourself. Good luck.
Ow, and a DEMO
[EDIT]
Made a (bit sloppy though) animation using transitions, check the updated Fiddle.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I have a nav list. I want the lighter gray area to be clickable as a link as opposed to just the text. The source is:
http://mattcdecker.comeze.com/HELP/
<nav>
<ul>
<li>Work</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
CSS
nav{
float:right;
}
nav li{
float:left;
text-transform:uppercase;
font-size:24px;
background:#333;
margin:70px 10px 0 10px;
padding:10px;
}
nav a{
color:#666;
}
nav a:hover{
color:#fff;
}
Please post code, not a link.
You need to move the padding from the list element to the anchor, and also add display:block to the anchor.
nav li {
float: left;
text-transform: uppercase;
font-size: 24px;
background: #333;
margin: 70px 10px 0 10px;
padding: 0;
}
nav a {
color: #666;
display: block;
padding: 10px;
}
The issue you have is that your nav HTML is malformed so won't display properly.
<nav>
<!-- ^ this probably doesn't belong here -->
<ul>
<!-- ^ this certainly doesn't belong here -->