Question

我对css和html很陌生，并试图建立一个网站来改进和学习。我一直在寻找并且无法弄清楚如何在边栏中修复我的菜单，对我而言，看起来ul中的li由于某种原因向右浮动，继承我的代码：

也是Jsfiddle Link： https://jsfiddle.net/h2bpxcxe/

#side-bar #recents {
    width: auto;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

#recents h3 {
    text-align: center;
    padding-top: 4px;
}

#recents ul {
    margin-top: -10px;
    list-style-type: none;
    text-align: center;
}

#recents ul li {
    padding: 2% 0px;
    border-bottom: 1px solid black;
    background: grey;

感谢somone可以提供帮助！ :)

Answer 1

# app/config/config.yml database: driver: mysql databasename: theDatabaseName username: theUserName password: thePassword hostname: myRDSInstance.myRDSHost.us-west-2.rds.amazonaws.com port: 3306 - 默认情况下，元素有UL。您需要重置此填充，这会将您的padding-left - 元素置于侧边栏中。

li

FIDDLE

处理此类问题时的提示。查看浏览器开发人员工具中的元素。填充和边距将始终清晰显示在那里。

Answer 2

我觉得侧边栏的list / ul元素的位置也存在问题。

如果您申请：

$new = array();
foreach($obj as $key=>$val {
   if($key == "exercise_name") {
     $key1 = $val;
   }

   if($key == "category_name") {
     $new[$key1] = $val;
   }


}

print_r($new);

到你的CSS，它将阻止list元素溢出父元素，这是你当前代码的情况。这是一个jsfiddle：https://jsfiddle.net/46t4f5zs/

Answer 3

就这样做

<div id="recents">


            <ul><h3>Recent Posts</h3>
                <li><a href="#">Recent One</a>
                </li>
                <li><a href="#">Recent Two</a>
                </li>
                <li><a href="#">Recent Three</a>
                </li>
                <li><a href="#">Recent Four</a>
                </li>
            </ul>
        </div>

不能把我的李放在我的ul里面

3 个答案: