我正在尝试创建一条中间有文本的垂直线。我不知道如何在 css 中实现这一点。
看图片
问问题
20883 次
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 回答