在标题元素上调整底部边框的大小以适合文本宽度并且也要响应 [英] Resize bottom border on a heading element to fit the text width and also be responsive

问题描述

我想使底部边框更窄且响应更快，同时保持文本居中.我怎样才能做到这一点?我尝试显式使用width属性，但显然不起作用.

I want to make the bottom border narrower and responsive while keeping text centered at the same time. How could I achieve that? I tried using width property explicitly but that is apparently not working.

演示: https://www.bootply.com/jEB0e4Ao61

h1 {
  border-bottom: 1px solid orange;
  padding-bottom: 5px;
  width: 400px;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container text-center features">
  <h1>Features</h1><br>
</div>

推荐答案

您需要做两件事:

1. 使用 display:inline-block ;
2. 设置 width:自动

从块元素更改，以便将边框的大小调整为文本的宽度:

< h1> 是一个 block 元素，它将自动拉伸到容器的100％宽度.将宽度设置为自动，或者将百分比应用于默认宽度，即50％将是容器宽度的50％.

<h1> is a block element, which will automatically stretch to 100% width of the container. setting width to auto or a percentage will apply to the default width, i.e. 50% will be 50% of the container width.

使用 inline-block 和 auto 的宽度将使标题仅与标题本身一样宽，这意味着您不需要针对不同屏幕尺寸的媒体查询.这将使边框成为标题本身的确切宽度.

Using inline-block and width of auto will make the heading only as wide as the heading itself, which means you won't need media queries for different screen sizes. This will make the border the exact width of the heading itself.

要使下划线"的宽度超出文本宽度，请执行以下操作:

如果您想在标题的两侧留出额外的空间，可以使用填充来做到这一点.例如:

If you would like extra space at the sides of the heading, you can use padding to do this. For example:

padding-left:20px; padding-right:20px;

将在标题的任一侧添加20px，扩展元素的宽度，这还将在底部两侧将底部边框扩展20px.

will add 20px to either side of the heading, extending the element width which will also extend the bottom border by 20px on both sides.

工作演示:

h1 {
  border-bottom: 1px solid orange;
  display: inline-block;
  width: auto;
  text-align: center;
  margin: auto;
  padding: 0 20px 5px; /* this adds 20px to the sides, extending the border  */
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container text-center features">
  <h1>Features</h1><br>
</div>
<p>The "underline" for this heading extends 20px either side of the text by setting the left and width padding to 20px</p>

来扩展文本的任一侧20px

这篇关于在标题元素上调整底部边框的大小以适合文本宽度并且也要响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！