CODEWITHSUNDEEP
htmlcss
Robert
Robert

Reputation: 41

How to display two horizontal unordered lists on one line?

I'm trying to recreate the Google homepage as an HTML exercise, and am having trouble with the footer, which displays two sets of links on the same line, each with different alignments: one aligned left, the other right. However, I haven't yet succeeded in doing the following two tasks at once:

  1. Create two lists, one aligned left and one right
  2. Display both lists on the same line

Here's the text of my html file so far, with the relevant code in the footer tag:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <ul>
        <li><a href="https://mail.google.com/mail/?tab=wm"> Gmail</a></li>
        <li><a>Images</a></li>
        <li><a><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGYAAABmCAMAAAAOARRQAAAANlBMVEX///8AAADg4OAkJCQoKCiFhYWCgoLk5OT7+/vu7u4dHR0YGBggICBERERBQUFHR0eTk5PAwMD3J6laAAAAvUlEQVRoge2YyQ7DIAwFE9YspCX//7PtgVaARHyjFZm5Pj3NybbkaQIAAPgBi1clfknJWgVqFStt/CPonHD4lMS9CPQexUobFeYSrVLiqmB2YuVCo6uOaWqsWEGDBg2am2j6bGh/aJOjn997sxWB2aJYadPpegIMxRpdSfyMx1kF7hQrbdRebY5NXjbNyoVmrA2NBg0aNCNp+hyC942yOflZs2VyihWAm8ATkickGjRo0HTR8ITkCQkAAH/BCztRGS1ttQr7AAAAAElFTkSuQmCC" class="appimg"></a></li>
        <li><button class="bluebtn">Sign In</button></li>
    </ul>
</head>

<body>
    <div class = "page-wrap">
        <link rel="stylesheet" type="text/css" href="style.css">
        <img src = "https://i.kinja-img.com/gawker-media/image/upload/s--pEKSmwzm--/c_scale,fl_progressive,q_80,w_800/1414228815325188681.jpg" class="logo"/>
        <input type="text"/><br>

        <div>
            <button>Google Search</button>
            <button>I'm Feeling Lucky</button>
        </div>


    </div>
    <footer class="site-footer">
        <div class="bottomlist">
            <ul class = "left">
                <li class="left"><a>Advertising</a></li>
                <li class="left"><a>Business</a></li>
                <li class="left"><a>About</a></li>

            </ul>
            <ul>
                <li class="right"><a>Privacy</a></li>
                <li class="right"><a>Terms</a></li>
                <li class="right"><a>Settings</a></li>
            </ul>
        </div>
    </footer>   
</body>


</html>

And here's the relevant css:

ul{
    list-style-type: none;
    margin: 0;
    padding: 0; 
    text-align: right;
}

ul.left{
    text-align: left;
}

ul.right{
    text-align: right;
}

li {
    display: inline;
}

li.right {
    text-align: right;
}

a {
    color: black;
    text-decoration: none;
    font-family: arial,sans-serif;
    font-size: 13px;
}

a:hover{
    text-decoration: underline;
}

img {
    display: block;
    margin: 0 auto;

}

img.logo{
    height: 50%;
    width: 50%;
}

img.appimg{
    display: inline;
    height: 25px;
    width: 25px;
}

input {
    display: block;
    margin: 0 auto;
    width: 600px;
    height: 25px;
}

div {
    text-align: center;
}

div.bottom{
    display: table-cell;
    vertical-align: text-bottom;
    border: 1px solid #f00;
    height: 100px;
    width: 100px;
    background-color: 
}

div.bottomlist{
    display: inline;
    vertical-align: baseline;
}

button {
    margin: 0 auto;
    font: 13.3333px Arial;
 }

button.bluebtn{
    background-color: blue;
    color: white;
    border: 5px solid;
    border-radius: 10px;
    height: 40px;
    width: 75px;
}

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  height: 142px; 
}
.site-footer {
  background: gray;
}

Upvotes: 0

Views: 8943

Answers (4)

Razia sultana
Razia sultana

Reputation: 2211

<ul id="menu">
<li><a href="#logo">Item one</a></li>
<li><a href="#logo">Item two</a></li>
</ul>


#menu{
padding:2;
margin:2; 
color:#fff; 
font-family: arial, helvetica, sans-serif; 
white-space:nowrap; 
list-style-type:none; 
} 
#menu li {
display:inline;
}
#menu li a {
padding:0.2em 1em;
background:#fc6;
color:#000;
text-decoration:none; 
float:left;
border:1px solid #000; 
}
#menu li a:hover{
background:#08c;
color:#fff;
}

Upvotes: 0

Lucky Magpies
Lucky Magpies

Reputation: 11

I would go with placing the lists in divs of their own (Inside your 'bottomlist'), and removing the classes from the <ul> and <li> tags. Like this: 

<div class="bottomlist">
         <div class="left">
        <ul>
             <li><a>Advertising</a></li>
             <li><a>Business</a></li>
             <li><a>About</a></li>

                        </ul>
        </div>

        <div class="right">
        <ul>
             <li><a>Privacy</a></li>
             <li><a>Terms</a></li>
             <li><a>Settings</a></li>
                        </ul>
</div>
</div>

The CSS would be something like this:

#bottomleft .left { 
display: block;
position: relative;
float:left;
width: 50%;
    }

#bottomleft .right { 
display: block;
position: relative;
float:right;
width: 50%;
    }

Add margins / padding for spacing between the lists.

Upvotes: 0

markthewizard1234
markthewizard1234

Reputation: 443

Easiest way to do this is to put each of your Unordered lists into two seperate div containers.

eg/

<div style="float:left; width:50%;">
      <ul style="Display:in-line-block;">
       <li>1</li>
       <li>2</li>
      </ul>
</div>
<div style="float:right; width:50%;">
       <ul style="Display:in-line-block;">
       <li>1</li>
       <li>2</li>
       </ul>
 </div>

If the container is being pushed to the line below, it could be due to margins. In this case you will want to reduce the width to a lower percentage or remove the margins.

Upvotes: 1

ca8msm
ca8msm

Reputation: 1210

You will probably want to float your lists e.g

<ul class="left">
<li>One</li>
<li>Two</li>
</ul>
<ul class="right">
<li>Three</li>
<li>Four</li>
</ul>

and the CSS:

li {display:inline-block}
.left {float:left}
.right {float:right}

https://jsfiddle.net/ox03mtte/

Upvotes: 6

Related Questions