Question

我正在我的个人网站上工作，但我在这里遇到一些问题。我正在尝试创建4个应该显示的技能inline，但无论我尝试什么，它都不会发生。我尝试应用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＆＃34;技能＆＃34;显示彼此相邻？

亲切的问候

Answer 1

首先将 ID 更改为类，因为id必须是唯一的，并且有2个选项可以执行此操作

浮动：左
显示：内联块

我更喜欢第二个，所以你不需要在浮动div之后清除

＆＃13;

.skill{display:inline-block}

＆＃13;

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

＆＃13;

Answer 2

问题和快速修复

问题是您需要在DIV元素上String s = "{\"testId\":\"1719126\"}"; objectMapper.readValue(s, SolutionDto.class);，而不是在IMG元素上。

示例：

display:inline-block

<强>建议

保持<div id="skill" style="display:inline-block;"> <img src="images/html.png" style="width:125px;height:125px;;"> <p>Test1</p> </div>属性对页面唯一。如果您需要重复项，请改用id属性。
不要使用内联样式，而是将它们添加到CSS文件中并使用适当的类名

这样的事情：

＆＃13;

class

＆＃13;

.skill {
  display: inline-block;
}

.skill img {
  width: 125px;
  height: 125px;
}

＆＃13;

Answer 3

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

要解决您的问题，您需要将每个“技能”div的显示设置为内联块。这是一个Code Pen，所以你可以看到我做了什么。

<div id="skills">
   <div class="skill">
      <img src="images/html.png">
      <p>Test1</p>
   </div>
   <div class="skill">
      <img src="images/html.png">
      <p>Test2</p>
   </div>
   <div class="skill">
      <img src="images/html.png">
      <p>Test3</p>
   </div>
   <div class="skill">
      <img src="images/html.png" >
      <p>Test4</p>
   </div>
</div>

{{1}}

Answer 4

首先删除标签ID =＆＃34;技能＆＃34;因为它必须是唯一的（您不能在一个页面中多次使用相同的ID）。
删除＆＃34;显示：内联块;＆＃34;从图像样式中添加每个图像的父div style =＆＃34; float：left＆＃34; 。

Answer 5

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

#skills > div {
  float: left;
    }

#skills img{
    display: inline-block;
    height: 125px;
    vertical-align: middle;
    width: 125px;
}

#skills p {
    display: inline-block;
    vertical-align: middle;
}

显示某些元素

5 个答案: