而不是这些按钮,我怎么能把它变成侧边栏菜单?

时间:2016-01-14 10:34:02

标签: html css

我有这个定义管理主页的html文件。正如您所见,它有按钮,例如查看个人信息,查看费用索赔等。目前,所有这些按钮都只显示在屏幕中间。有人可以告诉我要添加到.css文件中的内容,将这些按钮变成侧边栏菜单吗?非常感谢,谢谢!

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel = "stylesheet" type = "text/css" href = "main.css">
  <title>Admin Home Page</title>
</head>

<body>
  <form action="MainpageOptions" method="post">
    <h1>
Admin Home Page
</h1>

    <input type="submit" value="View Personal Information" name="vpi">
    <br>
    <br>
    <input type="submit" value="View Expense Claims" name="vec">
    <br>
    <br>
    <input type="submit" value="View Payslips" name="vps">
    <br>
    <br>
    <input type="submit" value="Change Password" name="cp">
    <br>
    <br>
    <br>
    <br>
    <input type="submit" value="Maintain Employee Information" name="mei"> 
    <br>
    <br>
    <input type="submit" value="Maintain Tax Information" name ="mti"> 
    <br>
    <br>
    <input type = "submit" value="Maintain Payroll Items" name = "mpi"> 
    <br>
    <br>
    <input type = "submit" value = "Maintain Timesheet" name = "mts"> 
    <br>
    <br>
    <input type = "submit" value = "Maintain Employee Expenses" name = "mee"> 
    <br>
    <br>
    <input type = "submit" value = "Run Payroll" name = "rpy"> 
    <br>
    <br>
    <input type = "submit" value = "Generate Reports" name = "grp">
  </form>
</body>

</html>

1 个答案:

答案 0 :(得分:0)

尝试this

刚刚在整个菜单中添加了一个DIV并添加了以下CSS

<div id="adminSidebar">
#adminSidebar{float:left;background:lightgrey;}
#adminSidebar input{padding:5px;margin-bottom:5px;width:100%}

您可以随意使用样式,但这只是一个简单的例子