I have a problem and I can't seem to find the solution.
I'm making a drupal site, and I want to make these list-items come next to eachother. Their width is 45% so it should be possible to have 2 next to eachother, but I can't figure out how.
I've tried putting display inline and inline-block on mutiple of the UL's and LI's but nothing changes.
What should I do?
Just use float :
ul {
width: 940px;
}
li {
margin: 6px;
float: left;
list-style: none;
}
.clearfix::after {
content: '';
display: table;
clear: both;
}
<ul>
<li>
<img src="//lorempicsum.com/futurama/450/200/2" alt="" />
</li>
<li>
<img src="//lorempicsum.com/futurama/450/200/2" alt="" />
</li>
<li>
<img src="//lorempicsum.com/futurama/450/200/2" alt="" />
</li>
<li class="clearfix">
<img src="//lorempicsum.com/futurama/450/200/2" alt="" />
</li>
</ul>
It's hard to find out what you are doing wrong when you don't provide any code.
My guess is that you have not changed the display type and thus the elements are still blocks. If so then it does not matter how the width is set, each element will stay on it's own row.
either use float or display:inline; if you want to show the list items next to each other
See this fiddle for an example of different methods and why some don't work.
Related
I am trying to arrange an image next to some text. I was able to accomplish this with font awesome icons and text, but two images I was unable to get an icon for, so I am using images. I can't seem to get them side by side. What am I missing? Here is the code:
<ul className='lower-nav-ul'>
<li className='lower-nav__link'>
<FontAwesomeIcon
icon={'question-circle'}
className='question-circle'
/>
Help
</li>
<li className='lower-nav__link'>
<FontAwesomeIcon
icon={'map-marker-alt'}
className='map-marker-alt'
/>
Where to Buy/Rent
</li>
<div>
<img src={require('../images/safety-icon-light.png')} alt='safety-icon'className='safety-icon'/>
</div>
<li className='lower-nav__link-with-img'>Safety</li>
<div>
<img src={require('../images/en-flag-light.png')} alt='en-flag' className='en-flag'/>
</div>
<li className='lower-nav__link'>EN</li>
</ul>
And my CSS:
.lower-nav__link {
margin-bottom: 15px;
}
.lower-nav-ul {
margin-top: 0px;
display: flex;
justify-content: flex-start;
flex-direction: column;
padding-left: 15px;
padding-top: 15px;
}
I've tried so many different things and just took it all back to where it looks best. Any help would be appreciated. Thanks!
a div is not a valid child of a ul (only li’s can be children of ul’s). You need to put your content into an li and use display: flex on the li to space them. the display: flex styling only applies to the immediate children of the element it is applied to
Flex property applying on a container element. In your case li so move your div inside the li .
I believe the issue is that the second <li> element closes too early. The <div> that contains the <img> is after the closing </li> tag, so the style rules that apply to both the <ul> and <li> will not apply to it. Does moving that <div> inside the <li> tags solve the issue?
Foundation's top bar navigation tool is set-up to fully flesh out a hierarchy of links, relying upon list and item tags.
<div class="top-bar">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">Site Title</li>
<li>
One
<ul class="menu vertical">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
</div>
However, in an attempt to soften this structure, the goal is to have the second layer links on a single line, say
<ul><li>
One Two Three
</li></ul>
Unfortunately, either display is relinquished to the browser definition for line-item or display:block; from the base code of Foundation overrides even <li style='display: float'><a href="#" style='display: float'> with its .menu a class definition.
How can this one-liner be achieved?
Looks like you may have mixed up your css rules: display: block; and float: none. The default behaviour looks like it wants it to be vertical, and the structure looks to be built in that way. I didn't see anything in their docs for this (I skimmed them lol) but what I did to make it work was to use position:absolute; on that submenu, and then position it. I don't know what the rest of your menu looks like, but you will need to adjust I assume.
I created a codepen that might do what you need it to.
https://codepen.io/bjorniobennett/pen/bGGajWZ
ul.dropdown > li {
position: relative;
&:hover {
> ul.vertical {
display: block;
}
}
> ul.vertical {
display: none;
position: absolute;
width: 500%;
background: #c5c5c5;
top: 120%;
> li {
display: inline-block;
float: left;
}
}
}
I have a problem with w3css. When I add a link to a w3css navigation bar, it will come with a line break.
<link href="https://www.w3schools.com/lib/w3.css" rel="stylesheet">
<div class="w3-bottom" style="margin-bottom: 1px">
<ul class="w3-navbar w3-red" style="float: clear;">
<li style="margin-left: 2px">
Powered by w3css and fontawesome |
</li>
</ul>
</div>
I would like everything to be on one line. I hope you can help me, thanks. :)
//Cripi
This is a snippet of code that comes from the W3 css file you've included
.w3-navbar li a, .w3-navitem, .w3-navbar li .w3-btn, .w3-navbar li .w3-input {
display: block;
padding: 8px 16px;
}
If you edit the display property on that to be inline-block then things work as you'd expect.
Here is the code and an example link
.w3-navbar > li > a {
display:inline-block !important;
}
You need the "!important" to overwrite their stylesheet which would have priority otherwise.
http://codepen.io/hoonin_hooligan/pen/Mpwqwm
You have to change the display: block behavior to display: inline behavior. (And remove the padding to make it look less weird.) I used !important to make sure the browser accepts that specific value; you should replace this with a higher specificity selector, the same specificity selector later in the pageload so it overwrites the old value or change the css file of the current selector.
.w3-navbar li a{
display:inline !important;
padding: 0px !important;
}
<link href="https://www.w3schools.com/lib/w3.css" rel="stylesheet" />
<div class="w3-bottom" style="margin-bottom: 1px">
<ul class="w3-navbar w3-red" style="float: clear;">
<li style="margin-left: 2px">
Powered by
<a href="https://www.w3schools.com/w3css/">
w3css
</a> and
<a href="http://fontawesome.io/">
fontawesome
</a> |
</li>
</ul>
</div>
I have a list item, with floated objects inside of each item.
html:
<ul>
<li>
<div class="icon" /><div class="text">blah</div>
</li>
<li>
<div class="icon" /><div class="text">blah</div>
</li>
</ul>
css:
.icon, .text { float: left; }
.text:after { clear: both; }
My understanding is that the second style should add a clear: both after the text box. But it doesn't appear to be the case.
Normally, I would add an extra DIV after the .text div which had a class of 'cleared' or something to that affect which would clear the objects, but I have noticed many people don't do that and simply use the :after selector, equating to less hacky code.
Any pointers on what I am missing on how this works? Cheers
Hopefully you can see what the problem is, I want the links to go side by side not on top of each other?
Can you please see what the problem is on JS Fiddle: http://jsfiddle.net/pky7X/
Thank you for any help
At first, you forgot the <ul></ul>
<style>
ul {
list-style-type: none;
}
li {
float: left;
border: 1px solid #ff9900;
}
</style>
<ul>
<li>Home</li>
<li>About</li>
</ul>
First: You're missing <ul> around your <li> tags (don't think that's valid in HTML5; it wasn't before).
Second: Why even using list items and then removing the list-style and adding float?
Just use <span> or the <a> directly...
HomeAbout
... and then use CSS to set their padding, style, dividers, etc.
Remove the <br /> and place <li> tags inside a <ul> like so:
<ul>
<li>Home</li>
<li>About</li>
</ul>
Remove margin: -35px 220px; from CSS and remove the <br /> from HTML.