Question:

HTML CSS LISTS IN-LINE????

by  |  earlier

0 LIKES UnLike

How can i change my current CSS code to work right?

I want the four blocks to run 2 across. then go down a line and run two more across in the current format.

I know i could use tables, but i'm trying to do this with CSS! And using Lists!!!! Any help please.

Here's my code so far:

<html>

<head>

<style type="text/css">

ul

{

display: run-in;

height: 150px;

width: 150px;

outline-style: solid;

outline-width: thin;

position:relative;

left: 10px;

}

li {display: inline}

</style>

</head>

<body>

<ul>

<li><img width="100" height="100" src="image.jpg">

<li>line 1</li>

<li>line 2</li>

</ul>

<ul>

<li><img width="100" height="100" src="image.jpg">

<li>line 1</li>

<li>line 2</li>

</ul>

<ul>

<li><img width="100" height="100" src="image.jpg">

<li>line 1</li>

<li>line 2</li>

</ul>

<ul>

<li><img width="100" height="100" src="image.jpg">

<li>line 1</li>

<li>line 2</li>

</ul>

</body>

</html>

 Tags:

   Report

1 ANSWERS


  1. ul

    {

    display: inline;

    height: 150px;

    width: 150px;

    border:solid 1px #000000;

    position:relative;

    margin-left:10px

    }

    ul li {display: inline}

    might work the ul need to be a little bit bigger than you contain block but wide enought to fit 320px across this will be you first 2 blocks then the next 2 will apear on the next line on there own.

Question Stats

Latest activity: earlier.
This question has 1 answers.

BECOME A GUIDE

Share your knowledge and help people by answering questions.