Question

我读到了内联定位：

http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

然后我创建了一个测试页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<style type="text/css">
    p {display:inline}

    .inline
    {
        display:inline;
    }
</style>


<div style="display:inline;">

    <p>Hello</p>

    <p>Pete</p>

</div>

<div class="inline">

    <div>Hello</div>
    <div>Pete</div>

</div>

 <div class="inline">

    <p>Hello</p>
    <p>Pete</p>

</div>



</form>

然而，当我查看页面时，中间的两个div不是内联的，它们是一个接一个。

我不理解的是为什么后两个元素没有显示内联？我的意思是他们不应该根据文章。段落和分区都是块级别，那么为什么只有段落元素是“内联”？

任何帮助都非常感激。

皮特

Answer 1

你正在蔑视div的目的。如果您想使用内联元素，那么更好的选择是<span>元素。

如果您希望div并排显示，则应使用float。例如float:left每个div。

Answer 2

第二个div中的div没有类inline，因此不是内联元素。如果您将CSS定义更改为：

div, p {display:inline}

然后一切都会很好地排在一条线上。

Answer 3

<div>标签本质上是块级元素。除非您在CSS规则中明确说明，否则它们将保持不变。

这里有两个选择。

编写一个CSS规则，将一个内联div中的每个div与一个内联类匹配。例如

.inline div {display:inline}

但我建议不要这样做。

最佳选择是应用内联类，因为您已经写入要内联显示的每个div。 e.g。

.inline {display:inline}

此方法的好处是您可以将此类应用于任何元素，而不必为要以内联方式显示的每个html元素指定新规则。

顺便说一句 - 你应该尝试使用浮动而不是显示你的div内联。您可能会遇到显示和位置问题，具体取决于您的内联样式div的信息量。

Answer 4

你需要将课程放在内部div上：

<div class="inline">Hello</div>
<div class="inline">Pete</div>

为什么div不会内联

4 个答案: