相关疑难解决方法(0)
将居中文本添加到<hr /> - 类似行的中间
我想知道在xhtml 1.0 strict中有什么选项可以在文本的两边创建一条线 - 所以:
Section one ----------------------- Next section ----------------------- Section two
我想过做一些像这样的奇特事情:
<div style="float:left; width: 44%;"><hr/></div>
<div style="float:right; width: 44%;"><hr/></div>
Next section
或者,因为上面的对齐问题(垂直和水平):
<table><tr>
<td style="width:47%"><hr/></td>
<td style="vertical-align:middle; text-align: center">Next section</td>
<td style="width:47%"><hr/></td>
</tr></table>
这也有对齐问题,我解决这个问题:
<table><tr>
<td style="border-bottom: 1px solid gray; width: 47%"> </td>
<td style="vertical-align:middle;text-align:center" rowspan="2">Next section</td>
<td style="border-bottom: 1px solid gray; width: 47%"> </td>
</tr><tr>
<td> </td>
<td> </td>
</tr></table>
除了对齐问题之外,这两个选项都感觉"有点",如果你以前碰巧看过这个问题并且知道一个优雅的解决方案,我会非常感激.
推荐指数
解决办法
查看次数
Border CSS HTML中的文本
我想要一个看起来像这样的div:
这可能与HTML + CSS有关吗？我也将用jQuery动画这个div.当隐藏div时,我希望标题和顶行显示.
推荐指数
解决办法
查看次数
标题在图像之前和之后的行
我想在居中的标题之前和之后创建一条线.线条和文本必须具有透明背景才能将它们放置在不平坦的背景上.该行不得为100%宽度,如下所示:
标题的文字可以改变:
- 标题的宽度未知
- 标题可以跨越几行
h1 {
text-align: center;
border-bottom: 1px solid #000;
}<h1>Today</h1>推荐指数
解决办法
查看次数
CSS挑战,我可以不引入更多HTML吗？
想象一下,我有任何带有文本的块或内联块.像段落或李或其他什么.如果该标记具有"分隔符"类,我希望它显示如下:
所有内容都居中(text-align:center;就足够了).这是一个棘手的部分:在居中内容的两侧,出现一条(垂直居中的)线.
下图说明了我的想法:
如果我必须引入更多HTML,那么就忘掉它 - 不感兴趣.
我是一个很长时间的CSS用户,但我无法想象这一个......其他人有个主意吗？尽管我喜欢它,但最好没有CSS3(因为工作......因为兼容性而无法使用新的东西)..
示例问题: <p class="separator">CENTRE ME</p>
推荐指数
解决办法
查看次数
CSS:设置CSS行
.banner-bottom h2 {
font-size: 2em;
color: #372568;
position: relative;
padding-bottom: 1em;
text-align: center;
}
.banner-bottom h2:before {
content: '';
position: absolute;
top: 25%;
left: 25%;
background: #372568;
height: 2px;
width: 8%;
}
.banner-bottom h2:after {
content: '';
position: absolute;
top: 25%;
right: 25%;
background: #372568;
height: 2px;
width: 8%;
}<div class="banner-bottom">
<div class="container">
<h2>Special Promo</h2>
<h2>Promo</h2>
<div>
<div>结果:
如何根据编写示例的长度css其行如下:
推荐指数
解决办法
查看次数
中心文本,两侧都有类似hr的线条,不使用表格
我需要在标题文本的两侧创建一个标题长度相等的标题,并在行和文本之间创建一个固定大小的填充.文本会有所不同,因此不能设置宽度.这些行应占用标题容器中可用的所有剩余宽度.标题文字不得设置背景,因为它背后的背景会有所不同.像这样的东西:
-------------------------------------------------- -------一些文字----------------------------------------- ----------------
我用表解决了它:
<table width="100%">
<td><hr /></td>
<td style="width:1px; padding: 0 10px; white-space: nowrap;">Some text</td>
<td><hr /></td>
</table>?
你可以在这里试试:http://jsfiddle.net/md2dF/3/
从语义上讲,这是一个非常糟糕的解决方案,标题与表格数据无关.没有桌子你会怎么做？
总结一下(因为建议的解决方案都忽略了一个或多个要求):
- 标题不得有固定的宽度
- 标题文字不得有背景
- 标题文字不得有固定的宽度
- 文本两侧的线条必须占用所有剩余宽度
- 线条和文本之间的填充必须具有固定的宽度
- 如有疑问,请查看http://jsfiddle.net/md2dF/3/
推荐指数
解决办法
查看次数
如何让标题在文本后面有一条水平线？
我正在构建一个网站，下面是一部分模型
由于我使用的是构建 HTML 的内容管理系统，因此我必须使用单个h3标签。div我希望后面的线具有包含标签的宽度h3。这可能吗？
这是我能得到的最接近的： http: //jsfiddle.net/rmgtq6h6/
h3.line-behind { width: auto; position: relative; text-align: center}
h3.line-behind:after { content: " "; border-top: 3px solid black; position: absolute; width:100%; top: 50%; left: 0; z-index: 1; }
推荐指数
解决办法
查看次数
css中的行之间的文本
在CSS中,我该怎么做:
---Item---
用短划线连接就像一条线？
我想到了:
border-bottom: 3px solid #000;
但后来我不能向上移动线加上线将在文本后面,而不是围绕文本
我的HTML
<ul>
<li class="sub-menu-item" ><a href="#">FACULTY&STAFF</a></li>
</ul>
(如果可能的话,我想避免触及HTML)
以上所有可能通过CSS或我应该只使用一个图像？
我的目标是ie8及以上(当然还有所有新的浏览器)
推荐指数
解决办法
查看次数
在按钮旁边添加水平线
我有一个按钮，我想在每一边添加白线。无论我尝试的是在按钮内添加一条线，还是仅在一侧添加一条线。我已经完成了文本旁边的行，但是我在将它们添加到按钮的每一侧时遇到了问题。
这是我的代码
HTML
<button class="inst-btn" type="submit">Find Classes Now!</button>
CSS
.inst-btn { text-transform: uppercase; width: 320px; margin: 60px 0 0 320px; background-color:#eb6623; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; outline: 0; }
.inst-btn { font-size: 26px; color: #fff; padding: 5px 5px; margin: 0px; font-family: "arial"; border: 0px; margin-left: 310px; margin-top: 60px}
推荐指数
解决办法
查看次数
水平线 - 登录表格
我试图在此登录表单中添加一条与“或”一词对齐的水平线，但是我无法使其工作，因为它只会在该词下方对齐。 https://i.stack.imgur.com/12byj.png
* {
margin: 0;
padding: 0;
box-sizing: border-box
}
body,
html {
width: 100%;
height: 100%;
font-family: 'Lato', Arial, sans-serif;
}
#loginForm {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 10px 0;
}<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="new 1.css">
</head>
<body>
<form id="loginForm">
<input type="text" class="login-username" placeholder="Username/E-mail" autofocus="true" required>
<input type="password" class="login-password" placeholder="Password" required>
<button type="submit" class="login-submit" name="submit">Login</button>
<a id="forgotPass" href="#" class="login-forgot-pass">Forgot password?</a>
<p>or</p>
<a id="Signup" href="signup.html">Register</a>
</form>
</body>
</html>推荐指数
解决办法
查看次数
使用 CSS 将文本居中，在空白区域填充分隔线
概括
我想创建一个以日期为中心的元素，并且在左侧和右侧，应该有一条线（如<hr>）填充空白区域。
示例（我想创建的）
我的尝试（代码片段）
我尝试了几种不同的方法来实现这一目标，但我的知识仍然有限。您能解释一下我如何实现我的目标吗？
.post-container .blog-post .post-date hr {
color: #212931;
width: 30%;
vertical-align: middle;
}
.post-date .right {
position: absolute;
right: 0;
top: 0;
margin-right: 5%;
}
.post-date p {
font-size: 20px;
display: inline-block;
position: absolute;
transform: translateY(-15px);
color: #212931;
margin: 0 auto;
}<div class="post-date">
<hr class="left" />
<p>2023/06/25</p>
<hr class="right" />
</div>推荐指数
解决办法
查看次数
在文本中间的行
如何在文本中间创建一行,该行必须占据div的整个长度？像这样,括号表示div的开头和结尾:
[Text ------------------ Text]
推荐指数
解决办法
查看次数
use:before和:after元素填充文本元素的剩余空间
我正在尝试创建一个效果,该效果基本上构成一个标题标记,其中两行填充容器的剩余宽度.我正在尝试创建它,以便无论标题文本的长度如何,您仍然可以获得相同的效果+间距量.这个图像更好地显示了我想要解释的内容:
我最接近的是使用百分比宽度,但如果只使用一个小标题,则剩余空间很多.通常我会在我的标题标签中为span对象添加背景颜色,但我也试图使其成为可以在各种背景颜色上起作用的效果.
这是一个jsfiddle:https://jsfiddle.net/wv9zcuvm/ 和一些代码:
HTML:
<h2><span>Small title</span></h2>
CSS:
h2{
width:100%;
position:relative;
top:0; left: 0;
}
h2:before,
h2:after{
content:"";
display:inline-block;
width:30%;
height:1px;
background-color:red;
position:relative;
top: -10px;
}
h2:before{
left:0;
}
h2:after{
right:0;
}
h2 span{
width:40%;
display:inline-block;
text-align:center;
}
任何人都可以建议我如何实现我想要创造的东西？
推荐指数
解决办法
查看次数