-3

某些html标签会自动呈现在新行上,例如如果您将<ul>标签放在任何其他标签之后,例如<a>锚标签,那么<ul>标签将在新行中的标签之后呈现<a>

是否有任何可能的方法可以避免这种默认行为,而是可以将所有内容彼此相邻放置。

4

2 回答 2

0

使用 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/

于 2013-07-05T19:19:55.217 回答
0

您可以使用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彼此相邻放置。

于 2013-07-05T20:13:46.430 回答