歌剧中忽略的CSS填充答案

【问题标题】：css padding ignored in opera歌剧中忽略的CSS填充
【发布时间】：2012-06-15 19:24:44
【问题描述】：

我在页面 index.html 中有表单

<div class = "bottom_r">
    <h1>Get in Touch</h1>
    <form action="index.html" method="post">
      <ul>
        <li><input class = "input" type="text" name="fname" value = "Name:" /></li>
        <li><input class = "input" type="text" name="lname" value = "Email:" /></li>
        <li><textarea class = "textarea" >Message:</textarea></li>
        <li><input class="text_button" type="submit" value="Submit" /></li>
      </ul>
    </form>
</div>

style.css中的css样式

.bottom_r {
    float: left;
    width: 262px;
    height: 215px;
    margin: 0;
}


.bottom_r ul {
    list-style: none;
    padding-left: 0;
}


.bottom_r li {      
    margin: 0;    
    padding-left: 50px;           
}

但是填充：padding-left: 20px; 仅适用于第一个 <li>，此问题仅在 opera 中，在所有浏览器中都运行良好，我找不到问题，请帮助 :)

在线代码：http://cssdesk.com/8xrgD

【问题讨论】：

您使用的是哪个版本的 Opera？我看不出 Opera 和 FF 有什么区别
Nest 版本，今天更新。
我无法在 Opera 11.62 或 12.0（全新升级）中重现该问题
看这里我添加所有代码cssdesk.com/8xrgD ;)
@user1069874 好的，现在我可以看到了

标签： css html-lists opera padding

【解决方案1】：

更改第 62 行：

.main > ul li

【讨论】：

【解决方案2】：

顺便说一句...你的问题是你的

.main li {
    display: inline;
}

只需在你需要的地方定义 ist，而不是在整个 .main 中

【讨论】：

【解决方案3】：

我不知道这是什么原因，我可以重现它但看不出有什么问题，但是如果将 50px 填充从<li> 移动到他们的<ul>，它工作正常：

.bottom_r ul {
    padding: 50px;
}

见http://cssdesk.com/WERUf

【讨论】：

【解决方案4】：

最后，如果没有其他方法，请使用：

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
      .class {proprieties}
 }

仅适用于歌剧。

【讨论】：