Trying to get div on same line with <li> using flexbox

Related searches

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

Divs on same line - HTML & CSS, Hence the appearance that inline-blocks have collapsed their fought with all the font-size:0 tricks and tag chaining to try and kill the nodes. Why is the 3rd div not on the same line? Pick one, or all 3. Copy to PC, Open in favorite browser. one-row,3a-inline-blocks.html (889 Bytes). one-row,3b-inline-blocks.html (1003 Bytes). one-row,3

Flex property applying on a container element. In your case li so move your div inside the li .

I want to put two divs in HTML in the same line, but one always , There are at least four ways of doing this. The worst way would be to build a table with one row and two cells, each containing the divs you want on the same line. The width of the divs will be limited by the width of their container cells. Replace the div with a span. I'm trying to get two divs on the same line.the problem I have is when the browser window gets smaller, the second div is being pushed below the first div. Fluid layout is not a problem, it's a *solution* to the problem that web browser windows can change size. If you're looking for a format where everything is nailed firmly into place,

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?

How to use two <div> tag and align in a same line if kept in a single , But I am unable to show these two <div> in same line horizontally. I have tried doing this- <div style="width:1000px;overflow:hidden; height:auto� Questions: Can someone please help me with this problem as i have been dealing with it for a long time now…. I am trying to get 3 divs on the same line next to each other one of the divs looks like this: San Andreas: Multiplayer 15 pence

CSS Inline vs Inline-Block vs Block, So, if you try to set any width and height, it will have NO effects. .inline-element { display: inline; width: 1000px; /* ❌ won't have any effect */ height: 1000px;� If I use two <div/>s, they display one under the other, instead of next to each other. If I use <span/>s, I can't get the "two" span against the right edge of the viewport. I tried using a margin-top of -1em for the second div, but it's going to display form controls, which vary in height from browser to browser, so that's out.

Learn to Use CSS Display: Examples of Display Block and Inline-Block, The Use of CSS Display: Inline, Block and Hidden Elements Try it Live inline, The element stays in the same line and only takes up the width of its content It is also possible to make block elements appear in one line by� To reduce the size of Div one to make room for the other div, because they are block elements you would be left with space next to Div one and Div two below Div one. To move the div up to the next line both div's need to have the inline-block display setting as shown below.

With CSS properties, you can easily put two next to each other in HTML. Use the CSS property float to achieve this.With that, add height:100px and set mar

Comments
  • I was able to fix it. Thanks for your help everyone!
  • Great — glad to hear!