需要适当的 CSS 才能使文本和 href 完美对齐

Question

我是 CSS 的新手。我从现有代码中复制了一个 CSS 并更改如下：

.feedback_h1 {
  width: 100%;
  float: left;
  margin: 0px;
  font-family: Arial;
  font-size: 12px;
  font-width: 400;
  color: #000000;
  margin-bottom: 15px;
}

<div Class="feedback_h1">
  We will use only personal information. Our <a href="https://example.com" target="_blank">privacy 
      policy</a> agreed?
</div>

现在我得到的结果如下：

  We will use only personal information. Our
  privacy policy
  agreed?

但是，我期待这样的结果（在一行中）：

  We will use only personal information. Our privacy policy agreed?

我想，我需要右对齐（因为左对齐正确）或者我在 CSS 中遗漏了什么吗？我可以在 CSS 中考虑哪些附加属性以在一行中完成此操作？

VS 2013 是否提供设计器视图来对齐 cshtml 页面？

Answer 1

您的 <a> 锚元素似乎显示了块。这将导致包裹在锚元素之间的单词默认具有 100% 的 width。

尝试将以下内容放入您的 css

.feedback_h1 a {
  display: inline-block;
}

<a> 元素默认为 display: inline，所以不确定为什么会这样。但是从代码来看，这似乎是您的代码产生此结果的最明显原因。

要弄清楚发生了什么，我建议使用浏览器的检查器工具并直接检查元素。查看应用于元素的 CSS 样式通常有助于调试，并通过取消选中或更改它们来进行测试，以查看其在您网站上的实时效果。

需要适当的 CSS 才能使文本和 href 完美对齐

Proper CSS required to make text and href alignment perfect

html

css

asp.net-mvc

visual-studio-2013