css中的宽度百分比

我开发了一个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="#">F 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="#">FUddin</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>

（英国IT顾问）

（系统工程师，巴基斯坦）

---

是JSFIDLE。

这是对box模型的常见误解。如果指定

width:100%

并添加

padding

，则总体大小将超过100%

要防止这种行为，请在列表项中嵌套另一项（例如，

），并在这些项上使用边距

您还可以使用

框大小：边框框，但并非所有浏览器都支持此操作

另见：





这是对箱式模型的常见误解。如果指定
width:100%
并添加
padding
，则总体大小将超过100%

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

您还可以使用
框大小：边框框，但并非所有浏览器都支持此操作

另见：





如果删除
宽度
，使用
右边距
代替它，效果会更好。这样写：

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%;
}

选中此项
如果删除
宽度
，使用
右边距
代替它，效果会更好。这样写：

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%;
}

选中此项
您可以尝试CSS3
框大小调整

您可以尝试CSS3
框大小调整

这里有一个更新的JSFIDLE供您使用

这里有一个更新的JSFIDLE供您使用

像这样的事？

我为ul插入了一个id，这样它就不会与其他ul发生冲突。
然后在CSS中为它添加宽度，这样它就不会溢出。
类似这样的内容？

我为ul插入了一个id，这样它就不会与其他ul发生冲突。
然后在CSS中为它添加宽度，这样它就不会溢出。
哇，内联样式！您是否考虑过可以使用外部CSS？网站中现有的样式会影响你的侧边栏html吗？有什么问题吗？你刚才说“它没有正确显示”-什么没有正确显示？它是如何不能正确显示的？请将所有样式迁移到外部样式表，这太乱了。@Joseph:实际上，除了使用内联样式之外，我没有其他选择。@Akito您至少可以使用内部样式表（标签中的样式表）@Akito:有什么问题吗？我觉得很好。顺便说一句，如果你再次使用这种内联样式表噩梦，CSS末日的恶魔兔子会在你的服务器上唠叨，并摆弄那些内联样式表。使用外部样式表：；编辑你甚至可以在Wordpress中编辑你的主题。哇，内联风格！您是否考虑过可以使用外部CSS？网站中现有的样式会影响你的侧边栏html吗？有什么问题吗？你刚才说“它没有正确显示”-什么没有正确显示？它是如何不能正确显示的？请将所有样式迁移到外部样式表，这太乱了。@Joseph:实际上，除了使用内联样式之外，我没有其他选择。@Akito您至少可以使用内部样式表（标签中的样式表）@Akito:有什么问题吗？我觉得很好。顺便说一句，如果你再次使用这种内联样式表噩梦，CSS末日的恶魔兔子会在你的服务器上唠叨，并摆弄那些内联样式表。使用外部样式表：；编辑您甚至可以在Wordpress中进行编辑（编辑您的主题）。+1:
当然，右边距
。我想我被OP的努力（和内联代码）分散了注意力：D.非常感谢。只需要从您提供的代码中删除padding属性，效果非常好。谢谢。+1:
当然是右边距
。我想我被OP的努力（和内联代码）分散了注意力：D.非常感谢。只需要从您提供的代码中删除padding属性，效果非常好。谢谢