我可以使用 <span> 来实现吗?

乔治·约格利泽

我可以用什么来创造这种效果?如果我使用<span>如何正确定位它们,例如我试图定位它们,但<span>即使使用绝对位置,也无法将元素向左或向右移动,只有顶部和底部。我用过这个代码

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

需要什么

这是我的结果,我想将它们放在第一张图片中,我该如何实现? 是)我有的

麦克纳尔逊

您问了多个问题,一个更一般的问题,以及一个与如何对齐颜色选择器特别相关的问题。

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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

我们可以使用Spring Boot来实现Java库吗?

来自分类Dev

我们可以使用继承来实现链接列表吗?

来自分类Dev

可以使用静态方法来实现接口吗?

来自分类Dev

可以使用CssLayout来实现组件的绝对定位吗?

来自分类Dev

我可以使用重构来交换变量的类型吗?

来自分类Dev

我可以使用xperf来分析托管代码吗?

来自分类Dev

我可以使用循环来优化代码吗?

来自分类Dev

我可以使用此列表来填充Arrayadapter吗?

来自分类Dev

我可以使用python来CSP吗?

来自分类Dev

我可以使用 SUMPRODUCT 来完成此操作吗?

来自分类Dev

我可以使用 AgensGraph 来迁移数据吗?

来自分类Dev

我可以使用 for 循环来获得相同的结果吗?

来自分类Dev

我可以让 span 元素忽略列吗?

来自分类Dev

我可以使用折叠功能实现包装功能吗?

来自分类Dev

我可以使用QTimer实现多线程算法吗?

来自分类Dev

我们可以使用Renderscript来实现代码的面向安全性的部分吗?

来自分类Dev

可以使用不同的实现文件来实现多态吗?

来自分类Dev

我可以使用python CSP吗?

来自分类Dev

我可以使用迭代器吗?

来自分类Dev

我可以使用通配符替换吗

来自分类Dev

我可以使用RTF格式吗?

来自分类Dev

骨骼可以使用我的插件吗?

来自分类Dev

您可以使用React来实现Rails控制器动作吗?

来自分类Dev

我可以在课堂上实现+ =来增加包含的值吗?

来自分类Dev

我可以使用 mutate() 来模拟我将从使用 dplyr 的汇总() 加入的值吗?

来自分类Dev

我必须实现Applicative和Functor来实现Monad吗

来自分类Dev

我仍然可以使用旧的TestFlight服务来测试我的iOS应用版本吗?

来自分类Dev

我仍然可以使用旧的TestFlight服务来测试我的iOS应用版本吗?

来自分类Dev

我可以使用DNS服务来更改我的公共IP吗?

Related 相关文章

  1. 1

    我们可以使用Spring Boot来实现Java库吗?

  2. 2

    我们可以使用继承来实现链接列表吗?

  3. 3

    可以使用静态方法来实现接口吗?

  4. 4

    可以使用CssLayout来实现组件的绝对定位吗?

  5. 5

    我可以使用重构来交换变量的类型吗?

  6. 6

    我可以使用xperf来分析托管代码吗?

  7. 7

    我可以使用循环来优化代码吗?

  8. 8

    我可以使用此列表来填充Arrayadapter吗?

  9. 9

    我可以使用python来CSP吗?

  10. 10

    我可以使用 SUMPRODUCT 来完成此操作吗?

  11. 11

    我可以使用 AgensGraph 来迁移数据吗?

  12. 12

    我可以使用 for 循环来获得相同的结果吗?

  13. 13

    我可以让 span 元素忽略列吗?

  14. 14

    我可以使用折叠功能实现包装功能吗?

  15. 15

    我可以使用QTimer实现多线程算法吗?

  16. 16

    我们可以使用Renderscript来实现代码的面向安全性的部分吗?

  17. 17

    可以使用不同的实现文件来实现多态吗?

  18. 18

    我可以使用python CSP吗?

  19. 19

    我可以使用迭代器吗?

  20. 20

    我可以使用通配符替换吗

  21. 21

    我可以使用RTF格式吗?

  22. 22

    骨骼可以使用我的插件吗?

  23. 23

    您可以使用React来实现Rails控制器动作吗?

  24. 24

    我可以在课堂上实现+ =来增加包含的值吗?

  25. 25

    我可以使用 mutate() 来模拟我将从使用 dplyr 的汇总() 加入的值吗?

  26. 26

    我必须实现Applicative和Functor来实现Monad吗

  27. 27

    我仍然可以使用旧的TestFlight服务来测试我的iOS应用版本吗?

  28. 28

    我仍然可以使用旧的TestFlight服务来测试我的iOS应用版本吗?

  29. 29

    我可以使用DNS服务来更改我的公共IP吗?

热门标签

归档