您问了多个问题,一个更一般的问题,以及一个与如何对齐颜色选择器特别相关的问题。
To answer the question posed in the title: Yes, you can use to achieve that. <span>
tags are display: inline;
by default, meaning that, unlike a div
, they will line up next to each other in the same line. HTML tags can be extended to do more or less whatever you'd like when it comes to layout and design, especially tags that don't carry some sort of attribute or variable, like <div>
, <section>
, <span>
, etc. While it is true that these three tags have default browser definitions, you can use CSS to change these definitions very easily.
我感觉更具体的问题(关于如何布置你的颜色选择器)会更容易用你到目前为止编写的标记示例来回答。从您的屏幕截图中,我将假设您有某种网格系统可以将每辆车和相应的信息放入一个容器中,如下所示:
<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>
希望这有帮助。祝你布局的其余部分好运。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句