Question

我在数据表报告页面中给出了一个垂直菜单来选择类别。垂直菜单css如下所示，我无法在垂直菜单的右侧移动数据表报告。我尝试了很多方法。但我还是不能......怎么做？

<style type="text/css">

background:url(http://www.ourtuts.com/tutorials/vertical-menu/bg.jpg) scroll center center;
    margin:0;
    padding:0;
    font-family:Quicksand;
    font-weight:700;
}

ul.form {
    position:relative;
    background:#fff;
    width:250px;
    margin:auto;
    padding:0;
    list-style: none;
    overflow:hidden;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px; 

    -webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
    box-shadow:  1px 1px 10px rgba(0, 0, 0, 0.1);   
}

.form li a {
    width:225px;
    padding-left:20px;
    height:50px;
    line-height:50px;
    display:block;
    overflow:hidden;
    position:relative;
    text-decoration:none;
    text-transform:uppercase;
    font-size:14px;
    color:#686868;

    -webkit-transition:all 0.2s linear;
    -moz-transition:all 0.2s linear;
    -o-transition:all 0.2s linear;
    transition:all 0.2s linear;         
}

.form li a:hover {
    background:#efefef;
}

.form li a.profile {
    border-left:5px solid #008747;
}

.form li a.messages {
        border-left:5px solid #fecf54;
}

.form li a.settings {
        border-left:5px solid #cf2130;
}

.form li a.logout {
        border-left:5px solid #dde2d5;
}   

.form li:first-child a:hover, .form li:first-child a {
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

.form li:last-child a:hover, .form li:last-child a {
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

.form li a:hover i {
    color:#ea4f35;
}

.form i {
    margin-right:15px;

    -webkit-transition:all 0.2s linear;
    -moz-transition:all 0.2s linear;
    -o-transition:all 0.2s linear;
    transition:all 0.2s linear; 
}

.form em {
    font-size: 10px;
    background: #ea4f35;
    padding: 3px 5px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;        
    font-style: normal;
    color: #fff;
    margin-top: 17px;
    margin-right: 15px;
    line-height: 10px;
    height: 10px;       
    float:right;
}

.form greenem
{
    font-size: 10px;
    background: #35EA5C;
    padding: 3px 5px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;        
    font-style: normal;
    color: #fff;
    margin-top: 17px;
    margin-right: 15px;
    line-height: 10px;
    height: 10px;       
    float:right;
}


.form li.selected a {
    background:#efefef;
}

h1 {
    color:#fff;
    margin:0 auto;
    margin-top:60px;
    margin-bottom:40px;
    font-size:30px;
    width:300px;
    text-align:center;
}

p {
    text-align:center;
    position:absolute;
    width:100%;
    bottom:0;
    font-size:12px;
    font-family:Arial, Helvetica;
    color:#fff;
    text-transform:uppercase;
}
p a {
    color:#fff;
    text-decoration:none;
}

然后是我的HTML

<ul class="form">
    <li><a class="profile" href="javascript:void(0)" onclick="AllTask(1)" id="AllTask"><i class="icon-user"></i>All Tasks</a></li>
    <li class="selected"><a class="messages" href="#"><i class="icon-envelope-alt"></i>Messages <em>5</em></a></li>
    <li><a class="settings" href="#"><i class="icon-cog"></i>App Settings</a></li>
    <li><a class="logout" href="#"><i class="icon-signout"></i>Logout</a></li>
</ul>

Answer 1

使用 bootstrap 会更有帮助

<div class="row">
     <div class="col-sm-6 col-sm-4 col-sm-offset-4">
         <ul>
           .
           .//your code
         </ul>
     </div>
</div>

您可以根据自己的要求更改div类的大小，并且必须先使用bootstrap.css以及bootstrap.js文件。

谢谢。

Answer 2

在您的代码中，尝试删除前6行：

background:url(http://www.ourtuts.com/tutorials/vertical-menu/bg.jpg)     scroll center center;
    margin:0;
    padding:0;
    font-family:Quicksand;
    font-weight:700;
}

如何将页面的DataTable中心与垂直菜单

2 个答案: