Html 如何将其转换为侧边栏菜单，而不是这些按钮？_Html_Css

Html 如何将其转换为侧边栏菜单，而不是这些按钮？

html css

Html 如何将其转换为侧边栏菜单，而不是这些按钮？,html,css,Html,Css,我有一个html文件，它定义了管理员主页。它有按钮，如你所见，例如视图个人信息、视图费用索赔等。目前，所有这些按钮只显示在屏幕的中间。有人能告诉我要添加什么东西到.css文件中才能将这些按钮变成边栏菜单吗？非常感谢，谢谢 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel = "stylesheet" type = "text/css" href = "mai

我有一个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>


管理员主页
管理员主页

试试看

只是在整个菜单周围添加了一个DIV，并添加了以下CSS

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


#adminSidebar{float:左；背景：浅灰色；}
#adminSidebar输入{填充：5px；边距底部：5px；宽度：100%}

您可以随意使用样式，但这只是一个简单的示例。谢谢你！但是，浅灰色背景没有被正确应用。它并没有包含所有的按钮。你知道有什么参数可以解决这个问题吗？我的意思是，有没有办法让整个屏幕的左侧变成浅灰色的背景色？还要使按钮不是单独的按钮，而是侧边栏的一部分？像这样：真正的唯一方法（如plac3bodk所说）就是玩弄你各种作品的风格——边距、填充、高度、按钮风格等等，直到它看起来像你想要的。当然，这可能需要一整天的时间，但这就是使用css的生活方式@Ciara哈哈是的，一旦我建立了css，我就可以将它应用到所有页面，然后继续开发工资系统的实际功能（这是一个高中项目）嗨，原因是输入按钮有一些默认样式，如您在示例中看到的。因此，您需要设置输入的样式，以摆脱默认样式。您使用输入按钮的具体原因是什么？如果不是，我建议将菜单设置为带有a href链接的无序列表。检查并不要考虑下拉功能，只考虑样式。我想这很接近你想要的