Html 在一行中显示某些元素

我正在我的个人网站上工作，但我在这里有一个小问题。我试图创造4种技能，这些技能应该以内联方式显示，但无论我尝试什么，都不会发生。我尝试应用float:left，但这会导致skills id没有完整的内容CSS，我觉得这也很奇怪。代码如下：

<div id="skills">
  <div id="skill"> <img src="images/html.png" style="width:125px;height:125px;display:inline-block;">
    <p>Test1</p>
  </div>
  <div id="skill"> <img src="images/html.png" style="width:125px;height:125px;display:inline-block;">
    <p>Test2</p>
  </div>
  <div id="skill"> <img src="images/html.png" style="width:125px;height:125px;display:inline-block;">
    <p>Test3</p>
  </div>
  <div id="skill"> <img src="images/html.png" style="width:125px;height:125px;display:inline-block;">
    <p>Test4</p>
  </div>
</div>

我怎样才能让这4种技能彼此相邻

亲切问候问题和快速解决方法

问题是您需要在DIV元素上显示：inline块，而不是IMG元素上

例如：

<div id="skill" style="display:inline-block;">
    <img src="images/html.png" style="width:125px;height:125px;;">
    <p>Test1</p>
</div>

测试1

测试2

测试3

测试4

问题和快速修复

问题是您需要在DIV元素上显示：inline块，而不是IMG元素上

例如：

<div id="skill" style="display:inline-block;">
    <img src="images/html.png" style="width:125px;height:125px;;">
    <p>Test1</p>
</div>

测试1

测试2

测试3

测试4

首先将id更改为class as id必须是唯一的，有两个选项可以执行此操作

浮动：左 显示：内联块 我更喜欢第二个，这样你就不需要在浮动div之后清除

.skill{显示：内联块} 测试1

测试2

测试3

测试4

首先将id更改为class as id必须是唯一的，有两个选项可以执行此操作

浮动：左 显示：内联块 我更喜欢第二个，这样你就不需要在浮动div之后清除

.skill{显示：内联块} 测试1

测试2

测试3

测试4

---

首先，您不应该使用ID，所以应该用类替换它们。这是因为ID是唯一的。另外，不要在每个div中定义样式，而是创建一个css文件并将其放在那里

为了解决您的问题，您需要将每个技能div的显示设置为inline block。这里有一个例子，你可以看看我做了什么

技巧{ 显示：内联块； 宽度：100%； 身高：100%； } .技能{ 高度：125px； 宽度：125px； 显示：内联块； } .技能img{ 身高：100%； 宽度：100%； } 测试1

测试2

测试3

测试4

---

首先，您不应该使用ID，所以应该用类替换它们。这是因为ID是唯一的。另外，不要在每个div中定义样式，而是创建一个css文件并将其放在那里

为了解决您的问题，您需要将每个技能div的显示设置为inline block。这里有一个例子，你可以看看我做了什么

技巧{ 显示：内联块； 宽度：100%； 身高：100%； } .技能{ 高度：125px； 宽度：125px； 显示：内联块； } .技能img{ 身高：100%； 宽度：100%； } 测试1

测试2

测试3

测试4

首先，删除标签id=skill，因为它必须是唯一的，您不能在一个页面中多次使用同一id。 删除显示：内联块；从每个图像样式的图像样式和外接程序父div=float:left。 首先，删除标签id=skill，因为它必须是唯一的，您不能在一个页面中多次使用同一id。 删除显示：内联块；从每个图像样式的图像样式和外接程序父div=float:left。 尝试使用此css将元素内联定位

尝试使用此css将元素内联定位

---

你知道我如何在技能之间留出更多空间吗？@Matthijs_210:你可以尝试在div上设置右边距，例如：右边距：50px；你知道我如何在技能之间留出更多空间吗？@Matthijs_210:你可以尝试在div上设置右边距，例如：右边距：50px；