我想用css实现这个想法:
在CSS中执行此操作的最佳方法是什么? 非常感谢!!
更新
我之前使用标题做过这个技巧,更多信息请点击此处: Putting Heading within 2 horizontal lines in CSS
但是,当我尝试编辑标题版本时,也无法使用按钮。
答案 0 :(得分:2)
body {background:#fff; }
h3 {
width: 500px;
font: 30px Arial;
font-weight: normal;
text-align: right;
position: relative;
}
h3 span {
background: #fff;
margin-right: 15%;
padding: 0 20px;
}
h3:before {
content: "";
width: 100%;
left: 0;
top: 50%;
position: absolute;
z-index: -1;
height: 0;
border-top: 8px solid grey;
opacity:.2
}
button{
background-color:green;
border:1px solid green;
border-radius:5px;
vertical-align:center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<h3><span><button>Hello</button></span></h3>
</body>
</html>
答案 1 :(得分:1)
这就是你要追求的吗?
为文本创建div ...
<div class="rightrounded">Some Text</div>
并应用适当的CSS ......
.rightrounded {
width: 100px;
float: right;
border-radius: 5px;
background-color: #008000;
color: #fff;
text-align: center;
}