HTML 将 div 风格化为圆角标签答案

【问题标题】：HTML stylize a div like a rounded edge labelHTML 将 div 风格化为圆角标签
【发布时间】：2018-02-17 00:43:02
【问题描述】：

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

【问题讨论】：

使用border-radius
请尝试一下，然后在此处发布。在您自己尝试之前，我们无法为您提供帮助。
考虑一下：codepen.io/SgiobairOg/pen/pyXGWq
如何在网上搜索您正在尝试做的这个非常基本的事情，而不是期望我们给您/告诉您如何去做。

【解决方案1】：

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

试试这个css

【讨论】：

【解决方案2】：

.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>

【讨论】：

【解决方案3】：

类似这样的：

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

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

【讨论】：

您应该添加line-height: 35px 使文本居中
@CarstenLøvboAndersen 是的，但他不想知道怎么做，他只想知道如何制作一个圆形的 div 容器。所以没有必要在答案中过度这样做：P

【解决方案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>

【讨论】：