deebs February 2016

Unsure how to fix li item widths

I am pretty new to css and html and I am trying to create a drop-down menu that has 3 or 4 columns of links per drop down. I want the columns to be inline with each other. I have managed to accomplish that but the links in each column are going on two or more lines and I'd like them to display on one.

I've been messing around with the css but can't seem to figure out how to make them display on one line per link.

In my codpen, you will see what I am working with: http://codepen.io/anon/pen/vLQGqM

The best I've been able to do is make

.tlgnav .tlgnav-column {
	
	width: 100%;
  }

, but this makes the columns stack on top of each other, which is not what I want.

I am thinking it might have something to do with my .tlgnav li being set at width of 16.66% but if I change that, my menu doesn't fill the width of the screen.

Can anyone tell me what I am doing wrong?

Answers


Marcos Pérez Gude February 2016

You can use white-space : nowrap to avoid the line breaking, but maybe it's a better way to doing this. I answer with this solution but if someone gets something better follow it.

http://codepen.io/anon/pen/BjGzgZ

.tlgnav h3 + ul li {
  white-space:nowrap;
}

Post Status

Asked in February 2016
Viewed 3,100 times
Voted 4
Answered 1 times

Search




Leave an answer