problem with width of <ul> when <ul> float left and <li> float right

Expand|Select|Wrap|Line Numbers

 
<html>

<head>

<style>

#ex {

    width: 700px;

    background: red;

    float: left;        

}

a, span {

    display: block;

}

ul, li {

    margin: 0;

    padding: 0;

}

.ex_1 {

    float: left;

    background: yellow;

    list-style: none;

}

.ex_2 {

    float: right;

}

</style>

</head>
 
<body>

    <div id="ex">

        <ul class="ex_1">

            <li class="ex_2"><a href="#"><span>example 1</span></a></li>

            <li class="ex_2"><a href="#"><span>example 2 - </span></a></li>

            <li class="ex_2"><a href="#"><span>example 3 - </span></a></li>

            <li class="ex_2"><a href="#"><span>example 4 - </span></a></li>

        </ul>

    </div>

</body>

</html>

IN IE7 when 'ul' float: left and 'li' float:left, the width of 'ul' is ok. but when 'ul' float:left and 'li' float: right, the width of 'ul' is 100%(the background yellow). What should i do to make the width of ul when 'li' float:right is look like 'li' float:left. i can't set width of ul because it's must depends of 'li'. width of 'ul' = total width of 'li'.

because <a> and <span> are default display:block, so i can't set display:inline for <li>.

NOTE : only use CSS, not JAVASCRIPT.

Please help me !!!

Aug 18 '10 #1

Subscribe Post Reply

3701

Aimee Bailey

197

Expert 100+

you can always cheat by using the

Expand|Select|Wrap|Line Numbers

character code to denote your items inside an element with a display attribute of your choosing, you may find you get more control that way.

Aimee

Aug 22 '10 #2

Similar topics

Help with <ol>, <ul>, and <li>

by: Michael | last post by:

This is a two-part question to which I haven't been able to find an answer anywhere else. 1. Is it possible to format the bullet/number character of the <li>? In my styles sheet, I have the <li>...

HTML / CSS

hover menu using <ul><li>

by: toylet | last post by:

Attached is some css codes for a website. It has 3 parts: top-bar, side-bar (on the left) and main-body. The top-bar has a mouseover menu called top-menu implemented via ul:hover. When the mouse...

HTML / CSS

Separate text alignment within list item (<li>)

by: abro | last post by:

Problem: A list contained in a div contains several items that are made of two parts: itemName and itemValue. ie: <div id="data"> <li>longtime1 <span> 1326 mins></span></li> <li>longtime2...

HTML / CSS

IE bug: floated <LI> in 100% width <UL> wraps to next line

by: Matt | last post by:

Hi, Got an unordered list with 100% width, with 5 list items of 20% width styled to fill the width of the container element. Renders fine in Mozilla, but when you change the size of the window...

HTML / CSS

<ul>s nested in <li>s - how to get the on on higher level ?

by: abs | last post by:

Anybody has an idea how to get the <ul> element which is not nested in <li> element ? In other words I have several lists like this: <ul id="1"> <li>Aaaaaaaa</li> <li>Bbbbbbbb</li>...

Javascript

Can't remove spacing between <li> items in IE6

by: JB | last post by:

Hi All, This is doing my head in! Please help. I've built a simple <ul> to serve as a menu for a page I'm working on. I have tested the menu in Mozilla Fireworks 1.5 and it's fine - nice and...

HTML / CSS

Why wont be <LI> background span the whole background?

by: john_aspinall | last post by:

Im making my first foray into table-less web site design and have run into a brick wall. This is the URLs: http://www.ainewmedia.co.uk/css_page.htm http://www.ainewmedia.co.uk/css_test.css ...

HTML / CSS

Different <ul><li> behaviours between browsers

by: Syl | last post by:

Hello experts!! The top menu navigation bar displays perfectly in IE, but does not display properly in Mozilla or Netscape : http://checkeredshirt.com/textonly.html For some reason the non-IE...

HTML / CSS

Firefox ignoring text-decoration:none for <li>? Text of <li> is only clickable?

by: GloStix | last post by:

For some reason, FF likes to put a black underline on all my buttons. No matter what I do, it has the line I've tried displaying as block and cursor, anything.. Also I've been trying to get it so...

HTML / CSS

Min-width problem on <LI> not content containers

by: dlite922 | last post by:

Before you baulk at yet another min-width problem, hear me out. I've been googling for a good hour now and experimenting but at no avail. I have a horizontal UL/LI menu and I want the li width to...

HTML / CSS

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

C# / C Sharp