Question

我已将图片地图放到我的网站上，有多种颜色，所以我想制作一个＆＃34; div＆＃34;阻止并在其旁边解释该颜色在地图上表示的内容。但是，当我尝试这样做时，文本只是在＆＃34; div＆＃34;下面，如下所示：

＆＃13;

#dark_green {height: 40px;
width: 80px;
background-color: #009933; }

#light_green {height: 40px;
width: 80px;
background-color: #00ff00;
 }

#dark_red {height: 40px;
width: 80px;
background-color: #ff0000;
 }

#light_orange {height: 40px;
width: 80px;
background-color: #ff8c1a;
 }

＆＃13;

<div id="dark_green"></div> - Dark Green
<br>
<div id="light_green"></div> - Light Green
<br>
<div id="dark_red"></div> - Dark Red
<br>
<div id="light_orange"></div> - Light Orange

＆＃13;

如何将文本对齐每个＆＃34; divs＆＃34;？

Answer 1

使用您在此处提供的标记，只需将所有框显示为inline-block。

注意：只需将元素唯一的内容添加到id即可。所有其余的，对于多个元素都是相同的，应该在class中。为什么？如果你想制作这个盒子 - 比方说 - 扩展20px，那么你现在必须编辑每个box-id ，随着我对代码的改进，你只需编辑上课一次，你就完成了。

编辑：将您的解释包含在一个元素中，<span>就可以了。然后你就可以为它们应用样式（位置，颜色等）。

.box {
    width: 80px;
    height: 40px;
    display: inline-block;
    vertical-align: middle;
}

.explanation {
    margin-left: 5px;
    vertical-align: middle;
}

#dark_green {
    background-color: #009933;
}

#light_green {
    background-color: #00ff00;
}

#dark_red {
    background-color: #ff0000;
}

#light_orange {
    background-color: #ff8c1a;
}

<div id="dark_green" class="box"></div><span class="explanation">- Dark Green</span>
<br>
<div id="light_green" class="box"></div><span class="explanation">- Light Green</span>
<br>
<div id="dark_red" class="box"></div><span class="explanation">- Dark Red</span>
<br>
<div id="light_orange" class="box"></div><span class="explanation">- Light Orange</span>

Answer 2

为我工作：

#color_box_wrapper{
  display: table;
}

#color_box, #color_text{
  display: inline-block;
  margin: 0;
}

#color_text{
  display: table-cell;
  vertical-align: middle;
}

.dark_green {
  height: 40px;
  width: 80px;
  background-color: #009933; 
}

.light_green {
  height: 40px;
  width: 80px;
  background-color: #00ff00;
}

.dark_red {
  height: 40px;
  width: 80px;
  background-color: #ff0000;
}

.light_orange {
  height: 40px;
  width: 80px;
  background-color: #ff8c1a;
}

<div id="color_box_wrapper"><div id="color_box" class="dark_green"></div><p id="color_text"> - Dark Green</p></div>
<br>
<div id="color_box_wrapper"><div id="color_box" class="light_green"></div><p id="color_text"> - Light Green</p></div>
<br>
<div id="color_box_wrapper"><div id="color_box" class="dark_red"></div><p id="color_text"> - Dark Red</p></div>
<br>
<div id="color_box_wrapper"><div id="color_box" class="light_orange"></div><p id="color_text"> - Light Orange</p></div>

https://codepen.io/TriggeredOnCode/pen/PGogEz

如何对齐＆＃34; div＆＃34;旁边的文字？在HTML / CSS？

2 个答案: