Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • World
  • Users
  • Groups
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
Code Project
  1. Home
  2. Web Development
  3. ASP.NET
  4. Unordered List Items are not displaying in horizontal

Unordered List Items are not displaying in horizontal

Scheduled Pinned Locked Moved ASP.NET
csshelpjavascriptcomquestion
5 Posts 3 Posters 0 Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • S Offline
    S Offline
    simpledeveloper
    wrote on last edited by
    #1

    Hi all dears, I have an unordered list, the items in the list are diaplyed vertical always, I am trying different approaches, but still not working, I set the inline style attribute display, to flex or inline but nothing works, can anybody please help me who has gone through the same issue anytime previously.

    import React from 'react';
    import { connect } from 'react-redux';
    import '../css//bootstrap.css'
    import xxxHeader from '../images/header/xxxclassic-ca.png'
    import xxxClassicTwitter from '../images/header/xxxclassic-twitter.png'
    import xxxx from '../images/header/xxxclassic-linkedin.png'
    import CalxxxxInfo from '../images/header/xxxclassic-ytube.png'
    import xxxxClassicEmail from '../images/header/xxxclassic-email.png'
    import HeaderOrganization from '../images/header/header_organization.png'

    const divStyle = {
    display: 'flex',
    alignItems: 'center'
    };

    const HeaderMenu = (props) => (

                    *   [![California dot gov website]({xxxHeader})](http://www.xxxx.xxx)
                    *   [![xxxx Resources Board Twitter]({xxxClassicTwitter})](https://twitter.com/xxxxResources)
                    *   [![xxxx Resources Board Youtube]({CalxxxxInfo})](https://www.youtube.com/user/calxxxxinfo)
                    *   [![xxxx Resources Board LinkedIn]({xxxx})](https://www.linkedin.com/company/california-xxxx-resources-board)
                    *   [![xxxx Resources Board Email]({xxxxClassicEmail})](https://public.govdelivery.com/accounts/xxxx/subscriber/new?topic_id=listserv)
                
    
            
    
        
    
        
    
            
    
                
    
                    [![California xxxx Resources Board Logo]({HeaderOrganization})](http://xxx.xxxx.xxx)
    
    Richard DeemingR A 2 Replies Last reply
    0
    • S simpledeveloper

      Hi all dears, I have an unordered list, the items in the list are diaplyed vertical always, I am trying different approaches, but still not working, I set the inline style attribute display, to flex or inline but nothing works, can anybody please help me who has gone through the same issue anytime previously.

      import React from 'react';
      import { connect } from 'react-redux';
      import '../css//bootstrap.css'
      import xxxHeader from '../images/header/xxxclassic-ca.png'
      import xxxClassicTwitter from '../images/header/xxxclassic-twitter.png'
      import xxxx from '../images/header/xxxclassic-linkedin.png'
      import CalxxxxInfo from '../images/header/xxxclassic-ytube.png'
      import xxxxClassicEmail from '../images/header/xxxclassic-email.png'
      import HeaderOrganization from '../images/header/header_organization.png'

      const divStyle = {
      display: 'flex',
      alignItems: 'center'
      };

      const HeaderMenu = (props) => (

                      *   [![California dot gov website]({xxxHeader})](http://www.xxxx.xxx)
                      *   [![xxxx Resources Board Twitter]({xxxClassicTwitter})](https://twitter.com/xxxxResources)
                      *   [![xxxx Resources Board Youtube]({CalxxxxInfo})](https://www.youtube.com/user/calxxxxinfo)
                      *   [![xxxx Resources Board LinkedIn]({xxxx})](https://www.linkedin.com/company/california-xxxx-resources-board)
                      *   [![xxxx Resources Board Email]({xxxxClassicEmail})](https://public.govdelivery.com/accounts/xxxx/subscriber/new?topic_id=listserv)
                  
      
              
      
          
      
          
      
              
      
                  
      
                      [![California xxxx Resources Board Logo]({HeaderOrganization})](http://xxx.xxxx.xxx)
      
      Richard DeemingR Offline
      Richard DeemingR Offline
      Richard Deeming
      wrote on last edited by
      #2

      You most likely have rules in the header-top or nav CSS classes with !important set, which overrides the style attribute. Try using your browser's developer tools to inspect the list element to see what's going wrong.


      "These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

      "These people looked deep within my soul and assigned me a number based on the order in which I joined" - Homer

      S 1 Reply Last reply
      0
      • Richard DeemingR Richard Deeming

        You most likely have rules in the header-top or nav CSS classes with !important set, which overrides the style attribute. Try using your browser's developer tools to inspect the list element to see what's going wrong.


        "These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

        S Offline
        S Offline
        simpledeveloper
        wrote on last edited by
        #3

        Sure thank you Richard, yeah actually I did - thanks Richard

        1 Reply Last reply
        0
        • S simpledeveloper

          Hi all dears, I have an unordered list, the items in the list are diaplyed vertical always, I am trying different approaches, but still not working, I set the inline style attribute display, to flex or inline but nothing works, can anybody please help me who has gone through the same issue anytime previously.

          import React from 'react';
          import { connect } from 'react-redux';
          import '../css//bootstrap.css'
          import xxxHeader from '../images/header/xxxclassic-ca.png'
          import xxxClassicTwitter from '../images/header/xxxclassic-twitter.png'
          import xxxx from '../images/header/xxxclassic-linkedin.png'
          import CalxxxxInfo from '../images/header/xxxclassic-ytube.png'
          import xxxxClassicEmail from '../images/header/xxxclassic-email.png'
          import HeaderOrganization from '../images/header/header_organization.png'

          const divStyle = {
          display: 'flex',
          alignItems: 'center'
          };

          const HeaderMenu = (props) => (

                          *   [![California dot gov website]({xxxHeader})](http://www.xxxx.xxx)
                          *   [![xxxx Resources Board Twitter]({xxxClassicTwitter})](https://twitter.com/xxxxResources)
                          *   [![xxxx Resources Board Youtube]({CalxxxxInfo})](https://www.youtube.com/user/calxxxxinfo)
                          *   [![xxxx Resources Board LinkedIn]({xxxx})](https://www.linkedin.com/company/california-xxxx-resources-board)
                          *   [![xxxx Resources Board Email]({xxxxClassicEmail})](https://public.govdelivery.com/accounts/xxxx/subscriber/new?topic_id=listserv)
                      
          
                  
          
              
          
              
          
                  
          
                      
          
                          [![California xxxx Resources Board Logo]({HeaderOrganization})](http://xxx.xxxx.xxx)
          
          A Offline
          A Offline
          Anandkumar Prajapati
          wrote on last edited by
          #4

          li
          {
          margin:10px;
          float:left;
          }

          S 1 Reply Last reply
          0
          • A Anandkumar Prajapati

            li
            {
            margin:10px;
            float:left;
            }

            S Offline
            S Offline
            simpledeveloper
            wrote on last edited by
            #5

            Thank you mere dost

            1 Reply Last reply
            0
            Reply
            • Reply as topic
            Log in to reply
            • Oldest to Newest
            • Newest to Oldest
            • Most Votes


            • Login

            • Don't have an account? Register

            • Login or register to search.
            • First post
              Last post
            0
            • Categories
            • Recent
            • Tags
            • Popular
            • World
            • Users
            • Groups