Question

如何使用html和CSS格式化我的文本以获得如下内容：

Animals: cat, dog, mouse,
         lion, tiger

我试过了，但它没有用。

.column {
	width: 300px;
}

.fat-text {
	font-weight: bold;
	display: inline-block;
}

.listing {
	border: 1px solid red;
	display: inline-block;
}

<html>
<head>
</head>
<body>
	<div class="column">
		<span class="fat-text">Animals: </span><span class="listing">cat, dog, mouse, elephant, tiger, lion, penguin, lama, wolf</span>
	</div>

</body>
</html>

Answer 1

定义.listing的宽度并定义vertical-align:top，如下所示

.column {
	width: 300px;
}

.fat-text {
	font-weight: bold;
	display: inline-block; vertical-align: top;
}

.listing {
	border: 1px solid red;
	display: inline-block;    width: 230px;
vertical-align: top;
}

<html>
<head>
</head>
<body>
	<div class="column">
		<span class="fat-text">Animals: </span><span class="listing">cat, dog, mouse, elephant, tiger, lion, penguin, lama, wolf</span>
	</div>

</body>
</html>

Answer 2

更改类列表的css添加了两个属性：

position: absolute;
    width: 113px; in case if you want fixed width

＆＃13;

.column {
	width: 300px;
}

.fat-text {
	font-weight: bold;
	display: inline-block;
}

.listing {
	border: 1px solid red;
position: absolute;
width: 113px;
	display: inline-block;
}

＆＃13;

<html>
<head>
</head>
<body>
	<div class="column">
		<span class="fat-text">Animals: </span><span class="listing">cat, dog, mouse, elephant, tiger, lion, penguin, lama, wolf</span>
	</div>

</body>
</html>

＆＃13;

Answer 3

我建议使用flexbox：

    <!doctype html>
    <html>
        <head>
            <style type="text/css">
              .column {
                width: 300px;
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-flex-flow: row nowrap;
                    -ms-flex-flow: row nowrap;
                        flex-flow: row nowrap;
              }
              .fat-text {
                font-weight: bold;
                margin-right: 8px;
              }
            </style>
        </head>
        <body>
          <div class="column">
            <span class="fat-text">Animals: </span><span class="listing">cat, dog, mouse, elephant, tiger, lion, penguin, lama, wolf</span>
          </div>

        </body>
    </html>

正确格式化HTML文本

3 个答案: