Question

内容和链接由WordPress生成，其中输出为

#s-text p {
  position: relative;
  display: block;
  font-weight: 500;
  font-size: 2.1em;
  width: 80%;
  margin: 0 auto;
  line-height: 1.25em;
  color: rgba(250, 250, 250, 0.9);
}
#s-text a {
  position: relative;
  display: block;
  border: 2px solid #fff;
  border-radius: 8px;
  color: #fff;
  font-weight: 500;
  font-size: 0.75em;
  margin: 20px 0;
  padding: 10px 15px;
}

<div id="s-text">
  <p>...content ...
    <a href "">link</a>
  </p>
</div>

这种方式适用于文本下方出现的链接，但是当我更改为内联块时，链接周围的边框转到两个边缘（不仅仅是链接周围），边框问题得到修复，但链接线条与文本。

我希望边框只围绕文本，并且链接要在内容下方居中。虽然我无法从<p>标记

之外删除它

Answer 1

您应该将链接包含在span标记内，然后使用Jquery设置范围样式，通过相应地给出位置和左属性值来使其居中。

<EmbeddedResource Include="Path\To\NestedFile.ext">
  <LogicalName>NestedFile.ext</LogicalName>
  <DependentUpon>ParentFile.cs</DependentUpon>      
</EmbeddedResource>

无论链接多长，这都会将您的链接置于左侧固定的位置。因此，您需要根据链接的宽度计算此左侧值。

this fiddle might help for the situation stated above(same size linktext)

Answer 2

希望这是你所期望的？让我知道您的反馈。谢谢！

将display: table和margin: 20px auto用于a代码。

#s-text {
  background: #ddd;
}

#s-text p {
  position: relative;
  display: block;
  font-weight: 500;
  font-size: 2.1em;
  width: 80%;
  margin: 0 auto;
  line-height: 1.25em;
  color: rgba(250, 250, 250, 0.9);
}
#s-text a {
  position: relative;
  display: table;
  border: 2px solid #fff;
  border-radius: 8px;
  color: #fff;
  font-weight: 500;
  font-size: 0.75em;
  margin: 20px auto;
  padding: 10px 15px;
}

<div id="s-text">
  <p>...content ...
    <a href="">link</a>
  </p>
</div>

边界延伸过文本

2 个答案: