某些html标签会自动呈现在新行上,例如如果您将<ul>
标签放在任何其他标签之后,例如<a>
锚标签,那么<ul>
标签将在新行中的标签之后呈现<a>
。
是否有任何可能的方法可以避免这种默认行为,而是可以将所有内容彼此相邻放置。
使用 CSS,将元素的显示设置为inline
:
display: inline;
您可以通过为元素创建具有 ID 或类样式的样式表来做到这一点...
CSS:
#myHeading {
display: inline;
}
.inlineHeading {
display: inline;
}
HTML:
<h3 id="myHeading">Inline Heading by ID</h3>
<h3 class="inlineHeading">Inline Heading by Class</h3>
或者,如果您希望该标记类型的每个元素都受到影响:
CSS:
h3 {
display: inline;
}
HTML:
<h3>Inline Heading by Tag</h3>
<h3>Another Inline Heading by Tag</h3>
<h3>Still an Inline Heading by Tag</h3>
您也可以使用 HTML 中的内联 CSS 样式来执行此操作:
<h3 style="display: inline;">An Inline Heading</h3>
但是,通常建议您将所有样式保存在单独的文件中。
在这里阅读更多:http: //www.w3schools.com/cssref/pr_class_display.asp
这是一个例子:http: //jsfiddle.net/jCJan/1/
您可以使用display: table-cell;
或简单float: left;
地达到预期的效果。这是与您的问题相关的工作示例。尝试玩弄它:
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
div {
float: left; /* for IE */
display: table-row;
}
div * {
float: left; /* for IE */
display: table-cell;
}
</style>
</head>
<body>
<div>
<a>Anchor tag</a>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</div>
</body>
</html>
这将强制 中的所有元素div
彼此相邻放置。