how can i make the li inside the div be horizontal?


Tags: css,html,html-lists

Problem :

how can I make the li inside the "menu" div be horizontal and if its bigger than the "menu" div then how could I make a slider to the left or right?

now this is the HTML`

<div id="menu">
    <ul style="text-align: center; background-color: #003366; display: inline ; position: center; list-style-type: none;">
        <li onClick="location.href = ''">how has the Internet impacted teens?</li>
        <li onClick="location.href = ''">how has the Internet impacted teens?</li>
        <li onClick="location.href = ''">how has the Internet impacted teens?</li>
        <li onClick="location.href = ''">how has the Internet impacted teens?</li>
        <li onClick="location.href = ''">how has the Internet impacted teens?</li>
    </ul>
</div>
 <h1 id="panel11">In what way has the Internet impacted teens?</h1>

<div id="person">......................</div>
<div id="person1">......................</div>
<div id="person2">......................</div>
<div id="person3">......................</div>
<div id="person4">......................</div>
<div id="person5">......................</div>
<div id="person6">......................</div>
<div id="person7">......................</div>
<div id="person8">......................</div>
<div id="person9">......................</div>

and now here is the CSS

#menu {
    margin-top:60px;
    margin-left:500px;
    text-align:center;
    overflow: auto;
    text-align: center;
    background-color: #003366;
    display: inline-block;
    width: 400px;
    height: 50px;
    position: center;
    list-style-type: none;
}
body {
    background-color: green;
    margin: auto;
}
h1 {
    background-color: #FF0D0D;
    position:fixed;
    top:0;
    width:100%;
    z-index:99;
    text-align:center;
    margin-top: 0px;
}
#person {
    float:left;
    clear:right;
    background-color: orange;
    margin-top:100px;
}
#person1 {
    float:right;
    clear:left;
    background-color: orange;
}
#person2 {
    float:left;
    clear:right;
    background-color: orange;
}

its the same for the rest of the "person" divs. I've looked around the internet and I had found one but I just cant remember the website in which I had found it in.



Solution :

To make the li elements appear in a row, you have to add the display:inline property to them and the white-space:nowrap property to their parent ul or the #menu div, so the line won't be broken.

If you want to have a horizontal scrollbar that appears automatically in case the window/screen is narrower than the menu, you must use the overflow:auto property applied to the parent ul or the ancestor #menu div

I've also cleaned up the #menu div CSS: position:center is not valid, text-align:center is twice, etc.

Anyway, it's recommended putting the CSS together, so try to avoid using the style attribute in the HTML tags.

This is the CSS:

ul {
    list-style-type: none;
    white-space: nowrap;
    overflow: auto;

}
li {
    display: inline;
}

Check it here: http://jsfiddle.net/LbA7Q/3/


    CSS Howto..

    How to keep footer at bottom of screen using jQuery

    How does css inheritance work exactly?

    How to know from css if a select is opened

    How can I make jQuery's draggable function expand the container?

    How to place content below a fixed image?

    How to use css control to focus on div background when href link clicked

    How can I make kinetic.js full screen background view

    JavaFX: How not to fill background outside the rounded borders of a Label within a ScrollingPane

    How can I add a border to the right side of this object?

    How to disable animation in a specific element in CSS

    How to fit elements in 100% width without absolute positioning?

    How to remove borders around a div (nav, footer, whatsoever) in a WordPress theme? [closed]

    how to make css for work for different mobile sites

    How to work with CSS efficiently?

    How can I get the current state of my div animation?

    How do I achieve this particular hover effect?

    How to place text above an element in HTML/CSS?

    Selenium: How to get text from within an html tag which has another tag in it

    How can I change my code from PHP to HTML?

    How to force CSS3 slideshow animation to display in correct order?

    How to use css media query to switch animations

    How to reduce the gap between HTML5 video tag

    how to change the CSS background-image of a class-pseudoelement by Javascript only?

    How can I set a specific border around an element?

    How to cancel left or right rules with an !important tag?

    CSS vs jQuery How to create dynamic table style (zebra) without others plugins?

    how to display three text fields on one line

    Dompdf: how to get background image to show on first page only

    jQuery beginner: how to add css transition when using toggleClass(“open”)?

    Angular 2: How to change an element’s CSS class onclick and to remove all others (Plnkr)