Thứ Năm, 5 tháng 8, 2010

problem with width of 'ul' when 'ul' float left and 'li' float right


<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 on 'li'. width of 'ul' = total width of 'li'.

because both <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 !!!


8 nhận xét:

  1. use property "relative" for tag, set "top" and "right" value.

    Trả lờiXóa
  2. thanks for your answer but it's still not displayed properly .... :(

    Trả lờiXóa
  3. cách 1: vẫn dùng float:left như trên, nhưng đổi thứ tự thẻ "li"
    cách 2: dùng javascript , hoặc expression để set width cho .ex_1:
    width:expression((document.getElementById('ex_1').offsetWidth - document.getElementById('xxx').offsetLeft) + "px");



    example 1
    example 2 -
    example 3 -
    example 4 -




    Hơi củ chuối
    Theo tớ thì cứ dùng float left cho lành :D

    Trả lờiXóa
  4. @tuannh:
    1. show your updated code, plz.
    2. more detail on result of these code, plz.

    Trả lờiXóa
  5. NOTE : only use CSS, not JAVASCRIPT -> đầu hàng rồi :))

    Trả lờiXóa
  6. @vannt :
    JAVASCRIPT for CSS is ok, but the width of 'li' is not static. it's depends on the text, the looooooooooong text and the short text. So we can't use expression to get the width of 'li'.

    Trả lờiXóa
  7. @tuannh:
    thi` đành thêm một thẻ oánh dấu vị trí vào vậy. Ví dụ:
    ul class="ex_1" id="ex_1
    li class="ex_2"
    ...
    li class="ex_2"
    li class="ex_2" id="xxx" // oánh dấu
    /ul

    rồi dùng expression:
    .ex_1 {
    float: left;
    background: yellow;
    list-style: none;
    width:expression((document.getElementById('ex_1').offsetWidth - document.getElementById('xxx').offsetLeft) + "px");
    }

    Test thử xem, tớ thử thấy ok. Nhưng mà expression thực ra vẫn là Javascript :D, phạm luật hem.

    Trả lờiXóa
  8. why you must use 'ul float:left' and 'li float:right' ?

    I think you need set float:right to UL element and float:left for LI element .

    Trả lờiXóa