javascript - Anyone have easy way to create this using css and html? - Stack Overflow

admin管理员组

文章数量:1389825

I have done this with below code, But I this it is a difficult way to do this anyone have easy way for create this with css and html.

.fline {
  width: 2px;
  background-color: black;
  height: 10px;
  margin-left: 30%;
  margin-top: -9px;
}

.fline1 {
  width: 2px;
  background-color: black;
  height: 10px;
  margin-left: 60%;
  margin-top: -10px;
}

.fline2 {
  width: 2px;
  background-color: black;
  height: 10px;
  margin-left: 88.2%;
  margin-top: -11px;
}

<hr style="width: 300px;margin-left: 30%;color:black">
<div class="fline"></div>
<div class="fline1"></div>
<div class="fline2"></div>

I have done this with below code, But I this it is a difficult way to do this anyone have easy way for create this with css and html.

.fline {
  width: 2px;
  background-color: black;
  height: 10px;
  margin-left: 30%;
  margin-top: -9px;
}

.fline1 {
  width: 2px;
  background-color: black;
  height: 10px;
  margin-left: 60%;
  margin-top: -10px;
}

.fline2 {
  width: 2px;
  background-color: black;
  height: 10px;
  margin-left: 88.2%;
  margin-top: -11px;
}

<hr style="width: 300px;margin-left: 30%;color:black">
<div class="fline"></div>
<div class="fline1"></div>
<div class="fline2"></div>

• javascript
• html
• css
• line

Share Improve this question Follow edited Jan 16, 2020 at 5:55 Barmar 784k5757 gold badges548548 silver badges659659 bronze badges asked Jan 16, 2020 at 5:53 Suraj-UiSuraj-Ui 19622 silver badges1414 bronze badges 3

• Try using flexbox – varontron Commented Jan 16, 2020 at 5:56
• It doesn't seem to work right in the snippet, there's a gap. – Barmar Commented Jan 16, 2020 at 5:56
• If SVG is an option consider this bl.ocks/ChandrakantThakkarDigiCorp/… – ROOT Commented Jan 16, 2020 at 6:02

Add a ment  | 

8 Answers 8

Sorted by: Reset to default 5

.scale-container {
  width: 300px;
}

.scale {
  width: 296px;
  height: 20px;
  border: 2px solid black;
  border-bottom: none;
}

.scale>div {
  width: 50%;
  height: 20px;
  border-right: 2px solid black;
}

.label-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

<div class="scale-container">
  <div class="scale">
    <div></div>
  </div>
  <div class="label-container">
    <div>Low</div>
    <div>Average</div>
    <div>High</div>
  </div>
</div>

In this way you can add as many items as you want.

.p {
  display: flex;
  position: relative;
  padding-top: 15px;
  border-top: 2px solid red;
  margin-bottom: 30px;
}

.p div {
  position: relative;
  flex: 1;
  text-align: center;
}

.p div:after {
  content: '';
  position: absolute;
  height: 15px;
  width: 2px;
  background: red;
  top: -15px;
}

.p div:not(:first-child):not(:last-child):after {
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}

.p div:first-child {
  text-align: left;
}

.p div:first-child:after {
  left: 0;
}

.p div:last-child {
  text-align: right;
}

.p div:last-child:after {
  right: 0;
}

<div class="p">
  <div>
    Low
  </div>
  <div>
    Average
  </div>
  <div>
    High
  </div>
</div>

<div class="p">
  <div>
    Low
  </div>
  <div>
    Average -1
  </div>
  <div>
    Average
  </div>
  <div>
    Average 1
  </div>
  <div>
    High
  </div>
</div>

<div class="p">
  <div>
    Low
  </div>
  <div>
    Average -2
  </div>
  <div>
    Average -1
  </div>
  <div>
    Average
  </div>
  <div>
    Average 1
  </div>
  <div>
    Average 2
  </div>
  <div>
    High
  </div>
</div>

This is just a sample you can modify it to meet your requirments

.box {
  display: flex;
  border-top:1px solid #000;
}

.box>div:not(:last-child)
{
border-left:1px solid #000;
}
.box>div:last-child
{
border-right:1px solid #000;
}

.box>div
{
flex: 1 1 auto;
padding:10px;
}

<div class="box">
      <div></div>
      <div></div>
      <div></div>
    </div>

.box {
  display: flex;
  border-top:1px solid #000;
}

.box>div:not(:last-child)
{
border-left:1px solid #000;
}
.box>div:last-child
{
border-right:1px solid #000;
}

.box>div
{
flex: 1 1 auto;
padding:10px;
padding-top:40px;
}

<div class="box">
      <div>Low</div>
      <div>Average</div>
      <div>High</div>
    </div>

.grid{width:calc(100% - 20px);max-width:1000px;margin:0 auto;;border-top:3px solid red;display:flex;flex-direction:row;align-items:baseline;justify-content: space-between;}
.fline{position:relative;overflow:hidden;min-height:40px;float: left;padding-top: 20px;}
.fline::before{position:absolute;content:"";top:0;width:2px;height:20px;background:red}
.fline:first-child::before{left:0}
.fline:nth-of-type(2)::before{left:calc(50% - 2px)}
.fline:last-child::before{left:unset;right:0}

<div class="grid">
<div class="fline">Low</div>
<div class="fline">High</div>
<div class="fline">Average</div>
</div>

.fline {
  width: 2px;
  background-color: black;
  height: 10px;
  margin-left: 30%;
  margin-top: -9px;
}

.fline1 {
  width: 2px;
  background-color: black;
  height: 10px;
  margin-left: 60%;
  margin-top: -10px;
}

.fline2 {
  width: 2px;
  background-color: black;
  height: 10px;
  margin-left: 88.2%;
  margin-top: -11px;
}

<hr style="width: 300px;margin-left: 30%;color:black">
<div class="fline">Low</div>
<div class="fline1">Average</div>
<div class="fline2">High</div>

• First you need to define one outer wrap and define width as you want to this.
• And position:relative for this.
• For first inner div with float:left; and last with float:right;.
• And center div with position:absolute; with margin:auto; from left and right;
• And margin-top depend on your parent div outer-wrap width for inner div like: fline,fline1,fline2

    .outer-wrap{
    width: 80%;
    height: 1px;
    background-color: #000;
    margin: auto;
    text-align: center;
    position: relative;
}
.fline {
      width: 2px;
    background-color: black;
    height: 10px;
    float: left;
    margin-top: 1px;
}

.fline1 {
      width: 2px;
    background-color: black;
    height: 10px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.fline2 {
  width: 2px;
    background-color: black;
    height: 10px;
    float: right;
    margin-top: 1px;
}

<div class="outer-wrap">
    <div class="fline"></div>
    <div class="fline1"></div>
    <div class="fline2"></div>
</div>

This one is the right answer to this question

.scale-container {
  width: 300px;
}

.scale {
  width: 296px;
  height: 20px;
  border: 2px solid black;
  border-bottom: none;
}

.scale>div {
  width: 50%;
  height: 20px;
  border-right: 2px solid black;
}

.label-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

<div class="scale-container">
  <div class="scale">
    <div></div>
  </div>
  <div class="label-container">
    <div>Low</div>
    <div>Average</div>
    <div>High</div>
  </div>
</div>

本文标签： javascriptAnyone have easy way to create this using css and htmlStack Overflow