Question

这是我的代码：

<head>
  <style type="text/css">
    #cssmenu > ul li {
        background-color: #F4F4F4;
        display: block;
        position: relative;
        text-decoration:none;
    }
    #cssmenu > ul li a {
      background-color: #F4F4F4;
      display: block;
      position: relative;
      margin: 0;
      border-bottom: 1px dotted #d9d9d9;
      border-left: 1px dotted #D9D9D9;
      border-right: 1px dotted #D9D9D9;
      padding: 15px 10px;
      width: 150px;
      font-size: 11px;
      text-decoration:none;
      color:#7C7C7C;
   }
    #cssmenu > ul li a:hover {
        background-color:#4285F4;
        color:white;
    }
    #header_content {
        height:25px;
        width:60%;
        color:White;
        background-color:#083061;
        margin-left:320px;
    }
  </style>
</head>

<body>
  <div style="width:100%">
    <div id='cssmenu' style="width:10%;margin-top:1px;">
      <ul style="margin-top:0px;margin-left:30px;">
        <li><a href='#'><span>DASHBOARD</span></a></li>
        <li><a href='#'><span>RESOURCES</span></a></li>
        <li><a href='#'><span>CALL ROUTING</span></a></li>
        <li><a href='#'><span>RECORDINGS & CALL LOGS</span></a></li>
      </ul>
    </div>
  <div id="header_content">
    <label>Dashboard</label>
  </div>
</body>

我想横向修复这两个div？

Answer 1

如果你想水平对齐两个或多个div，你可以使用他们的css样式的display属性：

div#foo {
    display: inline-block;
}
div#bar {
    display: inline-block;
}

小提琴：here

Answer 2

使用float：left in style for div id =“cssmenu”

<style type="text/css">
#cssmenu > ul li {
    background-color: #F4F4F4;
    display: block;
    position: relative;
    text-decoration:none;
}
#cssmenu > ul li a {
    background-color: #F4F4F4;
    display: block;
    position: relative;
    margin: 0;
    border-bottom: 1px dotted #d9d9d9;
    border-left: 1px dotted #D9D9D9;
    border-right: 1px dotted #D9D9D9;
    padding: 15px 10px;
    width: 150px;
    font-size: 11px;
    float:left;
    text-decoration:none;
    color:#7C7C7C;
}
#cssmenu > ul li a:hover {
    background-color:#4285F4;
    color:white;
}
#header_content{
    height:25px;
    width:60%;
    color:White;
    background-color:#083061;
    margin-left:320px;
}
</style></head>
<body>
    <div style="width:100%">
        <div id='cssmenu' style="width:10%;margin-top:1px;">
            <ul style="margin-top:0px;margin-left:30px;">
                <li><a href='#'><span>DASHBOARD</span></a></li>
                <li><a href='#'><span>RESOURCES</span></a></li>
                <li><a href='#'><span>CALL ROUTING</span></a></li>
                <li><a href='#'><span>RECORDINGS & CALL LOGS</span></a></li>
            </ul>
        </div>
        <div id="header_content">
            <label>Dashboard</label>
        </div>
    </div>
</body>

Answer 3

这里的CSS是 jsfiddle

    #cssmenu{
    margin-top:1px;
    display:inline-block;
} 
#cssmenu > ul li {
    background-color: #F4F4F4;
    display: block;
    position: relative;
    text-decoration:none;}
#cssmenu > ul li a {
    background-color: #F4F4F4;
    display: block;
    position: relative;
    margin: 0; 
    border-bottom: 1px dotted #d9d9d9;
    border-left: 1px dotted #D9D9D9;
    border-right: 1px dotted #D9D9D9;
    padding: 15px 10px;
    width: 150px;font-size: 11px;
    text-decoration:none;color:#7C7C7C;
}
#cssmenu > ul li a:hover {
    background-color:#4285F4;
    color:white;}
#header_content{
    height:25px;
    width:60%;
    color:White;
    background-color:#083061;
    display:inline-block;
    vertical-align:top;
}

HTML

<div style="width:100%">
    <div id="cssmenu">
    <ul style="margin-top:0px;">
    <li><a href='#'><span>DASHBOARD</span></a></li>
    <li><a href='#'><span>RESOURCES</span></a></li>
    <li><a href='#'><span>CALL ROUTING</span></a></li>
    <li><a href='#'><span>RECORDINGS & CALL LOGS</span></a></li>
    </ul>
    </div>
    <div id="header_content">
    <label>Dashboard</label>
    </div>

水平对齐两个div

3 个答案: