在图像中添加文本下方的水平线？

时间：2016-01-27 11:32:19

标签： html css twitter-bootstrap

enter image description here 这是我的代码，我需要在图像中添加水平边框

<section class="about">
    <div class="container">
        <h1 class="text-center">The Resturant</h1>
        <h3 class="text-center">A little about us and a brief history of   how   we started</h3>
        <div class="about-border"></div>
    </div>

</section>

5 个答案:

答案 0 :(得分：2)

尝试

UINavigationController

小提琴：https://jsfiddle.net/9oapmz9b/

答案 1 :(得分：0)

试试这段代码。这是有效的。

<style>
.container {
    text-align: center;
}
.about-border {
    width: 200px;
    height: 3px;
    background: #F3C577;
    margin: 20px auto;
}

</style>
<section class="about">
    <div class="container">
        <h1 class="text-center">The Resturant</h1>
        <h3 class="text-center">A little about us and a brief history of   how   we started</h3>
        <div class="about-border"></div>
    </div>
</section>

答案 2 :(得分：0)

或者例如

.about .container h3 {border-bottom: 6px solid #000;}

答案 3 :(得分：0)

here is the sol:
enter image description here

    

<head>
  <script data-require="jquery@*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <script data-require="bootstrap@*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script data-require="angular.js@*" data-semver="2.0.0-alpha.45" src="https://code.angularjs.org/2.0.0-alpha.45/angular2.js"></script>
  <script data-require="angular.js@*" data-semver="2.0.0-alpha.45" src="app.js"></script>
  <script data-require="angular-route@*" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular-route.js"></script>
  <script data-require="ui-router@*" data-semver="0.2.15" src="https://cdn.rawgit.com/angular-ui/ui-router/805e69bae319e922e4d3265b7ef565058aaff850/release/angular-ui-router.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <section class="about">
    <div class="container">
      <h1 class="text-center">The Resturant</h1>
      <h3 class="text-center">A little about us and a brief history of   how   we started</h3>
      <div class="col-xs-12"><hr></div>
    </div>
  </section>
</body>

</html>

答案 4 :(得分：0)

.about-border div是不必要的，您可以改为定位:after伪元素。例如：

.about:after { /* this is the border */
    content:"";
    display:block;
    width: 6em;
    max-width:70%;
    border-bottom: 0.3em solid #F3C577;
    margin: 2em auto 0;
}

完整示例：https://jsfiddle.net/6d6tvqb2/

相关问题
最新问题