非导航元素使用display:inline、inline-block、block有什么区别？

Question

非导航元素使用display:inline、inline-block、block有什么区别？

htmlcss

3

我正在尝试在页面中央制作一个包含三个元素的水平列表，但不确定要使用哪种显示属性。我已经测试了所有属性，但都无法将它们从垂直变成水平。

具体来说，我正在尝试复制37signal的首页，但无法弄清如何排列这3个div。

http://37signals.com/

我的标记看起来像这样：

<section class="imgContainer">
    <ul>
        <img src="logo-bc.png" alt="Basecamp">
        <li class="productTitle">Basecamp&copy;</li>
            <ul>
                <li class="productSubTitle">Manage Projects</li>
                <li class="productDescription">Used by millions for project management.</li>
            </ul>
        <img src="logo-hr.png" alt="Basecamp">
        <li class="productTitle">Highrise&copy;</li>
            <ul>
                <li class="productSubTitle">Manage Contacts</li>
                <li class="productDescription">Know the people you do business with.</li>
            </ul>
        <img src="logo-cf.png" alt="Basecamp">
        <li class="productTitle">Campfire&copy;</li>
            <ul>
                <li class="productSubTitle">Work in Real-Time</li>
                <li class="productDescription">Group chat rooms for your business.</li>
            </ul>
    </ul>
</section>

编辑：按照指示添加CSS：

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on November 14, 2013 */

@font-face {
    font-family: 'crimson_textsemibold';
    src: url('crimsontext-semibold-webfont.eot');
    src: url('crimsontext-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('crimsontext-semibold-webfont.woff') format('woff'),
         url('crimsontext-semibold-webfont.ttf') format('truetype'),
         url('crimsontext-semibold-webfont.svg#crimson_textsemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}


html {
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
}

h1, h2 {
    font-family: "crimson_textsemibold" /*"Crimson Text"*/,"CrimsonSemibold","Times New Roman",Georgia,serif;
}

body {
    set width: 80%;
    margin: 0 auto;
    text-align: center
}

nav ul li a {
    text-decoration: none;
}

header {
    
}

ul li {
    display: inline;
}

li.productTitle {
    font-size: 2em;
    padding-top: .2em;
}

li.productSubTitle {
    color: red;
    font-weight: bold;
    padding: .6em 0 1em 0;
}

新的HTML：

<section id="imgContainer">
        <div class="mainContent">
            <img src="logo-bc.png" alt="Basecamp">
            <p>Basecamp</p>
            <p>Manage Projects</p>
            <p>Used by millions for project Management.</p>
        </div>
        <div class="mainContent">
            <img src="logo-hr.png" alt="Basecamp">
            <p>Highrise</p>
            <p>Manage Contacts</p>
            <p>Know the people you do business with.</p>
        <div class="mainContent">
            <img src="logo-cf.png" alt="Basecamp">
            <p>Campfire</p>
            <p>Work in Real-Time</p>
            <p>Group chat rooms for your business.</p>
        </div>
    </section>

新的CSS：

#imgContainer {
    width: 600px;
    height: 1000px;
    background-color: blue;
    text-align: center;
    margin: 0 auto;
}

.mainContent {
    display: inline-block;
    width: 150px;
    height: 200px;
    background-color: green;
    margin-top: 50px;
}

我基本上从JSfiddle中复制了你的代码，但是出现了一个非常奇怪的效果 -> http://gyazo.com/dfdded3b2304aec9eb1d00a82fef48fd

- Andy Lampert

内联就像文本一样。块，嗯，是一个块。内联块是可以有边距和其他东西的文本。这三个在这种情况下都可以使用。想想看，表格单元格和基本上所有都可以使用。 - bjb568

2个回答

1

永远记住，inline用于将内容并排放置，inline-block用于将内容并排放置，但容器会保留其块属性，即它们将具有特定的宽度和高度，而不像inline容器，其宽度和高度取决于其内容。 block永远不会将内容并排放置，它们总是一个在另一个下面。这些是CSS的基本规则，你越玩越好理解 :)

- Pratik

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mathias Rechtzigel · Accepted Answer

你想要给容纳元素的容器添加text-align:center;

然后你需要给容器内部的元素添加：display:inline-block;

这是我为你准备的一个示例。

HTML:

<div id="container">
    <div class="element">
        <p>Basecamp</p>
        <img src="http://lorempixel.com/100/100/"/>
        <p>Lorum Ipsum Pixel</p>
    </div>
    <div class="element">
        <p>Basecamp</p>
        <img src="http://lorempixel.com/100/100/"/>
        <p>Lorum Ipsum Pixel</p>
    </div>
    <div class="element">
        <p>Basecamp</p>
        <img src="http://lorempixel.com/100/100/"/>
        <p>Lorum Ipsum Pixel</p>
    </div>
</div>

CSS：

#container{width:600px;height:1000px;background-color:blue;text-align:center;}
.element{width:150px;height:300px;background-color:red;display:inline-block;margin-top:50px}

更新：添加了图片。