Question

某些html标记会自动在新行上呈现，就像您在任何其他标记之后放置<ul>标记，例如<a>，即锚标记然后<ul>标记将在<a>之后呈现新行中的{1}}标记。

是否有任何可能的方法可以避免这种默认行为，而且所有内容都可以放在一起。

Answer 1

使用CSS，将元素的显示设置为inline：

display: inline;

使用StyleSheet

您可以通过为元素创建具有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/

Answer 2

您可以使用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中的所有元素彼此相邻。

Html标签在一行中

2 个答案:

使用StyleSheet

或使用内联样式

更多信息