Question

我正在为旧的网络浏览器编写一个小型网站，所以我必须使用旧式标签。

body {
  background-color: black;
}

#left-pane,
#right-pane {
  border: 1px solid white;
  display: inline-block;
  width: 20em;
  height: 40em;
}

<div id="left-pane">
  <div class="conf">
    <p>First select</p>
    <select class="value">
      <option id="fr">France</option>
      <option id="ch">Suisse</option>
    </select>
  </div>
  <div class="conf">
    <p>Second select</p>
    <div class="value">
      <input type="radio" name="known" Value="Oui" />Oui
      <input type="radio" name="known" Value="Non" />Non
    </div>
  </div>
</div>
<div id="right-pane">
  <p>Third</p>
  <div id="goods">
    <input type="checkbox" name="AccessoiresAnimalerie" Value="Accessoires Animalerie" />
    <input type="checkbox" name="AccessoiresChaussures" Value="Accessoires Chaussures" />
  </div>
</div>

问题是我遇到了一个简单的问题，但我无法弄清楚是什么问题;我错过了一些东西......

我不明白为什么我的右侧窗格向下移动。我制作了两个窗格内联块，因此它们应该在同一条线上并排放置。但相反，我看到了这一点：

在Chrome和Firefox（最新版本）中呈现相同的效果。

我知道我可以用浮动方式做其他方式，但我想知道我的实现有什么问题。

Answer 1

You have to set vertical-align属性中top属性中的文本元素上的链接，这些元素会排列父元素顶部的元素，是一篇好文章here解释了vertical-align属性如何运作。

工作演示：

body {
	background-color: black;
}

#left-pane, #right-pane {
	border: 1px solid white;
	display: inline-block;
  vertical-align: top;
	width: 10em;
	height: 40em;
}

<div id="left-pane">
    <div class="conf">
        <p>First select</p>
        <select class="value">
            <option id="fr">France</option>
            <option id="ch">Suisse</option>
        </select>
    </div>
    <div class="conf">
        <p>Second select</p>
        <div class="value">
            <input type="radio" name="known" Value="Oui" />Oui
            <input type="radio" name="known" Value="Non" />Non
        </div>
    </div>
</div>
<div id="right-pane">
    <p>Third</p>
    <div id="goods">
        <input type="checkbox" name="AccessoiresAnimalerie" Value="Accessoires Animalerie" />
        <input type="checkbox" name="AccessoiresChaussures" Value="Accessoires Chaussures" />
    </div>
</div>

Answer 2

<html>
    <head>
    <style>
    body {
        background-color: black;
    }
    
    #left-pane, #right-pane {
        border: 1px solid white;
        float:left;
        color:white;
        margin-right:0.4em;
        display: inline-block;
        width: 20em;
        height: 40em;
    }
    </style>
    </head>
    <body>
        <div id="left-pane">
            <div class="conf">
                <p>First select</p>
                <select class="value">
                    <option id="fr">France</option>
                    <option id="ch">Suisse</option>
                </select>
            </div>
            <div class="conf">
                <p>Second select</p>
                <div class="value">
                    <input type="radio" name="known" Value="Oui" />Oui
                    <input type="radio" name="known" Value="Non" />Non
                </div>
            </div>
        </div>
        <div id="right-pane">
            <p>Third</p>
            <div id="goods">
                <input type="checkbox" name="AccessoiresAnimalerie" Value="Accessoires Animalerie" />
                <input type="checkbox" name="AccessoiresChaussures" Value="Accessoires Chaussures" />
            </div>
        </div>
    </body>
</html>

虽然其他人建议使用适合您目的的vertical-align: top;，但我发现float: left;也有效。 float: left是我做列的首选，或者是需要并排的任何内容。我在属性中添加了color: white和margin-right: 0.4em，以使示例看起来更好，但这是我个人的偏好。

为什么我的HTML div无法正确显示？

2 个答案: