在div中创建循环下拉列表

Question

我需要实现这样的事情：

这个想法是菜单栏包含一个图像或文本，以引起右侧用户的注意。设计师希望从主要的div中找到一个圆圈。

如果可能的话，我宁愿不将布局实现为图像，还是我必须将圆圈作为图像放在div中？

感谢。

Answer 1

您可以尝试将div与radius css对齐以创建曲线。

Answer 2

如果它需要是圆的，你可能不得不在这里使用某种图像。我在html中没有知道的内容区域允许圆形（除了使用radius border选项）。

您可以创建一个img或div，并将其相对于包含的主div进行定位，以保持您的设计。

Answer 3

这将设置圆形div而不使用顶部仅使用css

<style>
#round {
  border:4px solid;
  border-radius:50px;
  width:100px;
  height:100px;
  border-top:none;
  border-right:none;
  border-left:none;
  vertical-align:middle;
  display:table-cell;
  text-align:center
}
</style>

<div id="round">Lipsum</div>

使用svg图像可能差不多，

<svg>
    <path stroke="#000" stroke-width="2" fill="none"
          d="M 75, 0 m -75, 0 a 75,75 0 1,0 150,0 " />
    <text text-anchor="middle" x="75" y="20">Lorem</text>
    <text text-anchor="middle" x="75" y="50">Ipsum</text>
</svg>

Answer 4

要创建circle效果，您可以使用

div {
  border-radius: 10px;
}

这样，元素的边框将是模具并且将创建圆形，您可以使用更大或更小的值来使此属性成为圆形。然后使用以下方法将其放在右侧：

div {
  float: right;
}