473,881 Members | 1,544 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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

1 New Member
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <style>
  4. #ex {
  5.     width: 700px;
  6.     background: red;
  7.     float: left;        
  8. }
  9. a, span {
  10.     display: block;
  11. }
  12. ul, li {
  13.     margin: 0;
  14.     padding: 0;
  15. }
  16. .ex_1 {
  17.     float: left;
  18.     background: yellow;
  19.     list-style: none;
  20. }
  21. .ex_2 {
  22.     float: right;
  23. }
  24. </style>
  25. </head>
  27. <body>
  28.     <div id="ex">
  29.         <ul class="ex_1">
  30.             <li class="ex_2"><a href="#"><span>example 1</span></a></li>
  31.             <li class="ex_2"><a href="#"><span>example 2 - </span></a></li>
  32.             <li class="ex_2"><a href="#"><span>example 3 - </span></a></li>
  33.             <li class="ex_2"><a href="#"><span>example 4 - </span></a></li>
  34.         </ul>
  35.     </div>
  36. </body>
  37. </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
1 3740
Aimee Bailey
197 Recognized Expert New Member
you can always cheat by using the
Expand|Select|Wrap|Line Numbers
  1. &bull;
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.

Aug 22 '10 #2

Sign in to post your reply or Sign up for a free account.

Similar topics

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> tag formatted, for example, bold. However, when it's applied, the number of the <li> is not bold, but the text is. Do I have to apply the bold to the <ol> instead? 2. When I use <li>example text</li>, and when I insert a <br> after the </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 pointer hovers over the top-menu, the bottom margin of the top-bar expands downwards. How could I make the hover menu to stack on top of the main-body, not expanding the bottom margin of the top-bar? I believe it has something to do with...
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 <span> 1692 mins</span></li> <li> time1 <span> 24 mins </span></li>
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 in IE, the last item in the list has a nasty tendency to wrap down to the next line (and stay there). I can hack it (imperfectly) by setting the width of the list items to
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> <li>Cccccccc <ul> <li>111111</li> <li>222222</li>
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 compact with no extra spacing - but in Microsoft Internet Explorer 6 there are huge gaps between each list item. URL :
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 Im using an inline list for my horizontal navbar items with the right hand border of each <LIitem set to white 1px to create the illusion of a divider between each item.
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 browers are forcing the top navigation menu to dislpay "staggered" after the the first <ul><lielement. Can anyone see why this is happening ?
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 the entire block is clickable, not just the text. I've sorta got it so it's clickable, just some parts of the button I still can't click on. The website is http://pdhtdev.johnabbott.qc.ca/students/2010/james_mann/portfolio/index.htm The css...
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 be at least a certain amount (say 100px) but also extend if the text is longer than that. Observe: that being said, I don't know how to implement the various solutions (CSS only, I do not want a JS solution) such as this one:
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
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 presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.