css中的百分比宽度

Question

我开发了一个html css代码。它适用于所有浏览器，但当我将其上传到网站侧边栏时，它无法正常显示。

<p>
 <ul style="display:inline; list-style-type: none;">
 <li style="
background:none repeat scroll 0 0 rgba(255, 57, 65, 0.9) !important;
 text-decoration:none;

position: relative;
margin: 0 0 -6px 0;

padding: 15px 15px 15px 15px;

list-style:none;

width: 100%;

border: 0;

 ">
 <a style="color: #000000; text-decoration: none;text-align:center;" href="http://www.facebook.com/FrazAwan75;">Fraz Awan</a></li>

 <li style="background:none repeat scroll 0 0 rgba(255, 103, 57, 0.9) !important;padding:5px;text-decoration:none;width:95%;text-align:right;color: #000000; text-decoration: none;

 position: relative;

    margin: 0 0 -6px 0;

    padding: 15px 15px 15px 15px;

    list-style:none;



    border: 0;

 ">(IT Consultant, UK) </li> 
 <li style="background:none repeat scroll 0 0 rgba(255, 218, 57, 0.9) !important;padding:5px;text-decoration:none;color: #000000; text-decoration: none;


 position: relative;

    margin: 0 0 -6px 0;

    padding: 15px 15px 15px 15px;


    width: 90%;

    border: 0;


 "><a style="color: #000000; text-decoration: none;text-align:center;" href="http://www.facebook.com/fahd92">Fahad Uddin</a> </li> 
 <li style="background:none repeat scroll 0 0 rgba(193, 241, 78, 0.9) !important;padding:5px;text-decoration:none;width:85%;text-align:right;color: #000000; text-decoration: none;

 position: relative;

    margin: 0 0 -6px 0;

    padding: 15px 15px 15px 15px;

    list-style:none;



    border: 0;

 "> (Systems Engineer, Pakistan)</li> 


 <li style="
 background:none repeat scroll 0 0 rgba(29, 195, 246, 0.9) !important;;padding:5px;
 text-decoration:none;color: #000000; text-decoration: none;

 position: relative;

    margin: 0 0 -6px 0;

    padding: 15px 15px 15px 15px;

    list-style:none;

    width: 80%;

    border: 0;
    ">

 <a style="color: #000000; text-decoration: none; href="mailto:f_awan@hotmail.com?Subject=Hello%20again">Interact with Us </a>

 </li>
</ul>
</p>

以下是它的显示方式，

Here是JSFiddle。

Answer 1

最好删除width＆amp;使用margin-right代替它。写得像这样：

<强> CSS

.red{
background:rgba(255, 57, 65, 0.9);
}
.orange{
background:rgba(255, 103, 57, 0.9);
    text-align:right;
    margin-right:5%;
}
.yellow{
background:rgba(255, 218, 57, 0.9);
    margin-right:10%;
}
.green{
background:rgba(193, 241, 78, 0.9);
    text-align:right;
    margin-right:15%;
}

.blue{
background:rgba(29, 195, 246, 0.9);
    margin-right:20%;
}

选中此http://jsfiddle.net/RN2Hy/1/

Answer 2

这是对盒子模型的常见误解。如果您指定width:100% 并添加padding，则整体尺寸将超过100％。

要防止此行为，请在列表项中嵌套另一项（例如<div>），并在这些项目上使用边距。

您也可以使用box-sizing: border-box;，但并非所有浏览器都支持此功能。

另见：

• W3C: Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification: 8 Box model
• W3C: CSS Positioned Layout Module Level 3: 7. Sizing and positioning details
• MDN: box-sizing

Answer 3

您可以尝试使用CSS3 box-sizing。

http://www.w3.org/TR/css3-ui/#box-sizing0

Answer 4

这是一个更新的jsfiddle给你。

http://jsfiddle.net/RN2Hy/8/

Answer 5

这样的东西？ http://jsfiddle.net/pwvV5/

我为ul插入了一个id，所以它不会被其他ul搞得一团糟。 然后在CSS中为它添加宽度，这样它就不会溢出。