HTML 将 div 风格化为圆边标签

Question

我不太擅长创建 CSS 样式。我正在尝试对 div 进行风格化，如图所示。有人可以帮我吗？要么告诉我需要做什么，要么给我 CSS。我在很多地方都见过这样的按钮和 div，但我还没有找到使它看起来像这样的 CSS。

Answer 1

.btn{
border-radius:25%/100%;
border:1px solid #000;
background:#fff;
padding: 8px 15px;
font-size:14px;
}

.btn span{
font-size:10px;
padding-left:5px;
}

<button class="btn">sometext
<span>X<span>
</button>

Answer 2

.somebutton{
background-color: green;
    border: none;
    border-radius: 25px;
    width: 20%;
    height: 35px;
    color: white;
}

试试这个CSS

Answer 3

类似这样的：

.divname
{
    border: solid 2px #000;
    border-radius: 25px;
    width: 20%;
    height: 35px;
    color: black;
    text-align: center;
}

<div class="divname">
Text Here
</div>

Answer 4

这是完整的解决方案：(https://jsbin.com/jigupenihi/edit?html,css,output)

.rounded-btn{
  background : #fff;
  padding: 20px 40px;
  display:inline-block;
  border: 3px solid #000;
  min-width: 150px;
  border-radius: 100px;
  text-transform: uppercase;
  text-align: left;
  font-family: verdana;
  font-weight: bolder;
  cursor: pointer;
}
.close{
  float: right;
}

 <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Button</title>
</head>
<body>
  <br>
  <div class="rounded-btn">SOME TEXT <span class="close">X</span> </div>
</body>
</html>

Answer 5

.btn{
border-radius:25%/100%;
border:1px solid #000;
background:#fff;
padding: 8px 15px;
font-size:14px;
}

.btn span{
font-size:10px;
padding-left:5px;
}

<button class="btn">sometext
<span>X<span>
</button>

.rounded-btn{
  background : #fff;
  padding: 20px 40px;
  display:inline-block;
  border: 3px solid #000;
  min-width: 150px;
  border-radius: 100px;
  text-transform: uppercase;
  text-align: left;
  font-family: verdana;
  font-weight: bolder;
  cursor: pointer;
}
.close{
  float: right;
}

 <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Button</title>
</head>
<body>
  <br>
  <div class="rounded-btn">SOME TEXT <span class="close">X</span> </div>
</body>
</html>

HTML 将 div 风格化为圆边标签

问题描述投票：0回答：5

5个回答

最新问题

HTML 将 div 风格化为圆边标签

问题描述 投票：0回答：5

5个回答

最新问题

问题描述投票：0回答：5