Question

目前，我正在尝试向左移动<div>，向右移动<div>，以便在购物网站中分隔徽标和文字以进行作业。

header {
    background-color:black;
    color:white;
    text-align:left;
    font-size: larger;
    padding:5px;
}

.logo{
    float: left;
    text-align: left;
}

.headercatagories{
    float:right;
    text-align: right;
}

到目前为止，标题显示为拉伸（正确）徽标文字显示在左侧（正确）但是，类别div拒绝向右浮动并保持在左侧。

Answer 1

我看到的第一个问题是你在.logo之后有两个右括号。您应该使用更好的IDE。

＆＃13;

header {
    background-color:black;
    color:white;
    text-align:left;
    font-size: larger;
    padding:5px;
    height: 30px;
}

.logo{
    width: 30px;
    height: 30px;
    background-color: red;
    float: left;
    text-align: left;
}

.headercatagories{
    float:right;
    text-align: right;
}

.headercatagories ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

.headercatagories li{
    float:right;
    margin-right: 10px;
}

＆＃13;

<header>
  <div class="logo"></div>
  <div class="headercatagories">
    <ul>
      <li>category 1</li>
      <li>category 2</li>
      <li>category 3</li>
    </ul>
  </div>
</header>

＆＃13;

Answer 2

<table width="100%">
  <tr>
    <td>
     // put ur left content
    </td>
    <td align="right">
    // ur right content
    </td>
  </tr>
</table>

在标题标记中将div左右div左右浮动

2 个答案: