Question

我想要一个标题，如图片中所示。

目前我有3个flex列：

<section id="section1" class="py-5">
    <div class="container">
        <div class="d-flex">
            <div class="p-2 w-50 text-center"><h1>OUR DIVISIONS</h1></div>
            <div class="p-2 w-25 text-center"><h1>Sample Heading 2</h1></div>
            <div class="p-2 w-25 text-center">Sample Heading 3</div>
        </div>
    </div>
</section>

如图所示，我需要标题中的OUR____线效果。

任何帮助将不胜感激。

Answer 1

我设法提出了与您似乎想要的东西相近的东西，但我认为这很大程度上取决于容器的宽度（例如h1，h2等）

也许您可以使用下面提供的代码并将其调整为适合您自己的需求？

请参见下面的演示代码

.w-50 {
  background-color: #f8db7d;
  font-family: sans-serif;
  width: 160px;
}

.w-50>h1 {
  font-size: 18px;
  padding: 5px 10px;
  margin: 0;
  line-height: 1em;
}

.w-50>h2 {
  font-size: 28px;
  padding: 0 10px;
  margin: 0;
  width: 100px;
}

.w-50 > h1 > span {
  width: 100px;
  display:inline-block;
  border-bottom: 2px solid black;
  line-height: .8em;
}

<section id="section1" class="py-5">
  <div class="container">
    <div class="d-flex">
      <div class="p-2 w-50 text-center">        
        <h1>OUR<span/></h1>
        <h2>DIVISIONS</h2>
      </div>
      <div class="p-2 w-25 text-center">
        <h1>Sample Heading 2</h1>
      </div>
      <div class="p-2 w-25 text-center">Sample Heading 3</div>
    </div>
  </div>
</section>

Answer 2

所以我会尝试使用public static byte[] serialise(Object obj) { byte[] bytearray = null; ByteArrayOutputStream byteOutStream = new ByteArrayOutputStream(); ObjectOutputStream objectOutStream; try { objectOutStream = new ObjectOutputStream(byteOutStream); objectOutStream.writeObject(obj); bytearray = byteOutStream.toByteArray(); objectOutStream.close(); } catch (IOException e) { e.printStackTrace(); } return bytearray; } public static ReportParameters deSerialize(byte[] byteArray) throws IOException { ReportParameters reportParam = null; ByteArrayInputStream byteInstream = new ByteArrayInputStream(byteArray); ObjectInputStream objectInStream; try { objectInStream = new ObjectInputStream(byteInstream); reportParam = (ReportParameters)objectInStream.readObject(); objectInStream.close(); } catch (ClassNotFoundException e) { e.printStackTrace(); } return reportParam ; }元素。

我想到的最好的想法是：

:after

.underline:after {
  content: "";
  border-bottom: 1px black solid;
  display: inline-block;
  width: 85px;
}

唯一的问题是宽度固定为85px。因此，对于其他标题，您需要调整宽度

Answer 3

这是我对动态宽度所做的：

<section id="section1" class="py-5">
    <div class="container">
        <div class="d-flex">
            <div class="p-2 w-50">
                <h1 class="heading">
                    <span class="heading1">OUR</span>
                    <br>
                    <span class="heading2">DIVISIONS</span>
                </h1>
            </div>
            <div class="p-2 w-25 text-center"><h1>Sample Heading 2</h1></div>
            <div class="p-2 w-25 text-center">Sample Heading 3</div>
        </div>
    </div>
</section>

使用的CSS：

.heading{
    overflow: hidden;
    margin-bottom: 0;
    font-weight: normal;
    display: inline-block;
}

.heading2{
    font-size: 2.5rem;
    font-weight: 500;
}

.heading span.heading1:after{
    content:'';
    display:inline-block;
    width:100%; height:100%;
    margin-right:-100%;
    border-bottom:2px solid #000;
    margin-left: 5px;
}

希望这对某人也有帮助...

标题后CSS显示边框

3 个答案: