我可以使用<span>做到这一点吗?

时间:2019-05-08 20:53:53

标签: html css3

我可以用什么来产生这种效果?并且如果我使用<span>,如何正确放置它们,例如,我尝试放置它们,但是即使绝对位置(只有顶部和底部)也不能向左或向右移动<span>元素。我已经使用了这段代码

<span class="colors">
    <span class="white"></span>
    <span class="orange"></span>
    <span class="grey"></span>
    <span class="green"></span>
 </span>

What is required

这是我要在第一张图片中放置它们的结果,我该如何实现? what i have

1 个答案:

答案 0 :(得分:1)

您要问的是多个问题,一个是一般性问题,另一个是与如何对齐拾色器有关的问题。

要回答标题中提出的问题:是的,您可以用来实现这一点。 <span>标签默认为display: inline;,这意味着与div不同,它们将在同一行中彼此相邻排列。 HTML标记可以扩展为执行布局和设计时或多或少要做的任何事情,尤其是不带有某种属性或变量的标记,例如<div><section><span>等。虽然这三个标记确实具有默认的浏览器定义,但您可以使用CSS轻松更改这些定义。

我认为,使用到目前为止已编写的标记示例,可以更轻松地回答更具体的问题(关于如何布置颜色选择器)。从您的屏幕快照中,我将假定您具有某种网格系统,该系统会将每辆汽车和相应的信息放入一个容器中,如下所示:

<div class="container">

<!-- Begin Car 1 -->
<div class="car">
 <img></img>
 <div class="colors">
  <button>Color1</button>
  <button>Color2</button>
  <button>Color3</button>
  <button>Color4</button>
 </div>
 <div class="info">
  <span>302 blah blah blah</span>
 </div>
</div>
<!-- End Car 1 -->

<!-- Begin Car 2, 3, etc... -->

<!-- End Container -->
</div>

无论如何,一种简单的布局方法是使用display: flex;,然后分别使用align-items: center;justify-content: center;将颜色垂直和水平居中。

所以它可能看起来像这样

<style>
 .colors > button {
   display: flex;
   align-items: center;
   justify-content: center;
 }
</style>

希望这会有所帮助。祝您布局顺利。