Question

我希望在左侧和右侧的同一水平线上有两个标题h2和h3。他们下面有人力资源，我希望他们与人力资源部门保持相同的距离。

我尝试让它们都是内联的，右边有一个浮动，另一个浮动。这样做的问题是h3，因为它小于垂直方向的h2，它的中心位置是h2长度的一半。

h2有点像坐在小时和h3看起来像漂浮在半空中。

我有点希望他们像坐在小时候一样。

h2{
display:inline;
float:left;
}
h3{
display:inline;
float:right;
}

我在谈论视觉描述情况。

Answer 1

您需要将两个标题包装在div标记中，并使该div标记使用clear: both的样式。 e.g：

<div style="clear: both">
    <h2 style="float: left">Heading 1</h2>
    <h3 style="float: right">Heading 2</h3>
</div>
<hr />

hr 之后的div 标记将确保将其推送到两个标题下方。

或类似的东西。希望这会有所帮助。

Answer 2

您只需要执行以下操作之一：

同时制作inline（或inline-block）
将它们设置为float左或右

您应该能够调整较小标题的height，padding或margin属性以补偿其定位。我建议将两个标题设置为height。

有关示例，请参阅此live jsFiddle。

（jsFiddle的代码）：

<强> CSS

h2 {
  font-size: 50px;
}

h3 {
  font-size: 30px;
}

h2, h3 {
  width: 50%;
  height: 60px;
  margin: 0;
  padding: 0;
  display: inline;
}

<强> HTML

<h2>Big Heading</h2>
<h3>Small(er) Heading</h3>
<hr />

Answer 3

Css vertical-align属性应该可以帮到你：

vertical-align: bottom;

是您需要的小标题：）

Vertical-Align

Answer 4

检查我的样本解决方案

<h5 style="float: left; width: 50%;">Employee: Employee Name</h5>
<h5 style="float: right; width: 50%; text-align: right;">Employee: Employee Name</h5>

这会将您的页面分成两部分，并将两个页眉元素平均插入左右两部分。

Answer 5

显示属性“inline-block”会将两个标题并排放置。你可以运行这个代码片段来查看它

<h1 style="display: inline-block" >Text 1</h1>
<h1 style="display: inline-block" >Text 2</h1>

Answer 6

以下代码允许您在同一行上有两个标题，第一个左对齐和第二个右对齐，并且还具有将两个标题保持在同一基线上的附加优势。

HTML部分：

<h1 class="text-left-right">
    <span class="left-text">Heading Goes Here</span>
    <span class="byline">Byline here</span>
</h1>

CSS：

.text-left-right {
    text-align: right;
    position: relative;
}
.left-text {
    left: 0;
    position: absolute;
}
.byline {
    font-size: 16px;
    color: rgba(140, 140, 140, 1);
}

Answer 7

在public static IHostBuilder CreateHostBuilder(string[] args) { return Host.CreateDefaultBuilder(args) .ConfigureAppConfiguration((hostingContext, config) => { config.SetBasePath(Directory.GetCurrentDirectory()) .AddCommandLine(args) .AddJsonFile("appsettings.json", optional: false, reloadOnChange: true); }) .ConfigureServices((hostContext, services) => { services.Configure<ConnectionStringConfiguration>(hostContext.Configuration.GetSection("ConnectionStrings")); services.AddTransient<ISmtpClient, MySmtpClient>(); services.AddTransient<IEmailService, EmailService>(); services.AddSingleton<IHostApplicationLifetime>(????); // What should I put here ???? services.AddHostedService<EInvoiceSenderService>(); }) .UseSerilog(); }元素内的span元素中添加一个style="float: right"。因此，您可以使用unicode箭头链接按钮添加“转到页面顶部”链接。

h1

如何在html中的同一行上有两个标题

7 个答案: