Question

我正在尝试创建一个中间带有文本的垂直线。我不知道如何在CSS中实现这一点。

见图片 enter image description here

Answer 1

实际上，有很多方法。

其中一个：

HTML

<div class="wrapper">
    <div class="line"></div>
    <div class="wordwrapper">
        <div class="word">or</div>                                        
    </div>
</div>

CSS

.wrapper {
    position: relative;
    width: 250px;
    height: 300px;
    border: 1px dashed #ccc;
    margin: 10px;
}

.line {
    position: absolute;
    left: 49%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #ccc;
    z-index: 1;
}

.wordwrapper {
    text-align: center;
    height: 12px;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    margin-top: -12px;
    z-index: 2;
}

.word {
    color: #ccc;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 3px;
    font: bold 12px arial,sans-serif;
    background: #fff;
}

参见示例：http://jsfiddle.net/zmBrR/22/

Answer 2

在标记周围添加<div>并使用这样的CSS： -

 <div class="verticalLine">
   some other content
  </div>

在cSS中

： -

 .verticalLine {
border-left:thick solid #ff0000;
 }

或者你可以试试这个： -

<style type="text/css">
 #your_col {
  border-left: 1px solid black;
  }
</style>

<div id="your_col">
  Your content here
</div>

Answer 3

这是一种没有背景图像的方法。它非常依赖固定的高度;你必须使用display：table-cell让它垂直对齐。

http://jsfiddle.net/mstauffer/uyTB7/

HTML：

<div class="container">
    <div class="side">Left side</div>
    <div class="or">
        <div class="or-line"></div>
        <div class="or-label">Or</div>
    </div>
    <div class="side">Right side</div>
</div>

CSS：

.container {
    padding: 1em;
}
.side, .or {
    float: left;
    height: 6em;
    text-align: center;
}
.side {
    width: 40%;
}
.or {
    position: relative;
    width: 20%;
}
.or-line {
    float: left;
    width: 50%;   
    border-right: 1px solid #aaa;
    height: 6em;
}
.or-label {
    background: #fff;
    color: #aaa;
    height: 1em;
    left: 50%;
    margin-left: -1.25em;
    margin-top: 2em;
    padding: .5em;
    position: absolute;
    text-transform: uppercase;
    width: 1em;
}

基本上，您使用.or-line创建50％的行;您将.or设置为position: relative;以包含绝对定位的.or-label;然后你手动将.or-label定位在中间的50％，然后用左负余量调整回来。然后，您还要使用填充扩展其大小，并使用margin-top垂直向下碰撞。

Answer 4

这是使用弹性盒的解决方案： https://jsfiddle.net/1z0runv9/1/

.wrapper {
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
}

.or-separator {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #d3d7da;
}

.vertical-line {
  border-left: 1px solid #d3d7da;
  flex-grow: 1;
  width: 1px;
}

 <div class="wrapper">
   <div class="or-separator">
     <div class="vertical-line"></div>
     <div>Or</div>
     <div class="vertical-line"></div>
   </div>
 </div>

Answer 5

您可以使用jquery执行相同的操作。在HTML文档中导入jQuery CDN

选择所需的项目并为此编写JavaScript代码。

考虑此示例

<!DOCTYPE html>
<html>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<title>Todo list</title>
 <style type="text/css">
 .completed{
 color: gray;
 text-decoration: line-through;
 }
 </style>
</head>
<body>
<div id="container">
<h1>Todo List</h1>
<input type="text" >
<ul>
'enter code here'
    <li>aaa </li>
    <li>bbb </li>
    <li>ccc </li>
 </ul>
</div>
<script type="text/javascript" >
`enter code here`

$("li").click(function () {
$(this).css("color","gray");    
$(this).css("text-decoration","line-through");
});
or 
$("li").click(function () {
$(this).toggleClass("completed");

});
</script>
</body>
</html>

在此示例中，行通过了list（li）元素。

如何在中间创建带有文本的垂直线

5 个答案: