我可以用什么来产生这种效果?并且如果我使用<span>
,如何正确放置它们,例如,我尝试放置它们,但是即使绝对位置(只有顶部和底部)也不能向左或向右移动<span>
元素。我已经使用了这段代码
<span class="colors">
<span class="white"></span>
<span class="orange"></span>
<span class="grey"></span>
<span class="green"></span>
</span>
答案 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>
希望这会有所帮助。祝您布局顺利。