10

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

看图片在此处输入图像描述

4

6 回答 6

16

其实方法很多。

其中之一：

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;
}

​</p>

见例子：http: //jsfiddle.net/zmBrR/22/

于 2012-11-28T05:26:24.263 回答
1

<div>在标记周围加上a并像这样使用 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>
于 2012-11-28T05:09:54.240 回答
1

这是一种没有背景图像的方法。它非常依赖固定的高度；你必须使用 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% 处，然后以负左边距将其调整回整条线。然后你还用 padding 扩大它的大小，并用margin-top.

于 2012-11-28T05:14:35.663 回答
1

这是弹性框的解决方案： 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>
于 2021-03-03T08:37:54.683 回答
0

你可以使用 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) 元素。

于 2018-08-31T16:11:28.370 回答
0

不管问什么问题，我都在这里寻求一个相当简单的方法。

.demo-body{
height: 400px;
}

.line-wrapper{
    background: black;
    width: 2px;
    height: 100%;
    position: relative;
 }
 
 .line-wrapper .word{
    position: absolute;
    background: white;
    top: 50%;
    transform: translate(52%,-50%);
    right: 50%;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 13px;
  }
  
.line-wrapper .word.vertical{
   writing-mode: tb-rl;
}
<div class="demo-body">

<!-- HORIZONTAL TEXT -->
<div class="line-wrapper">
  <div class="word">OR</div>
</div>

<br>

<!-- VERTICAL TEXT -->
<div class="line-wrapper">
  <div class="word vertical">OR</div>
</div>

</div>

于 2021-12-26T09:26:45.827 回答