修改

Question

我正在尝试构建一个HTML / CSS周期表。我将此作为我的HTML代码：

<div id="Hydrogen">
<p>1</p>
H
Hydrogen
1.00794
</div>

这是我的CSS代码：

body {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 100px;
  font-size: 13px;
}

#hydrogen {
  background: #fff;
  margin: 0 auto;
  width: 50px;
  padding: 30px;
  text-align: center;
  /* border-radius */
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  /* box-shadow */
  -webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
  -moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
  box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
  position: absolute;
}

如何定位#hydrogen ID中的<p>1</p>标记？基本上，我想在div单元格的左上角显示1。另外，这是最好的方法，还是有更简单的方法？

Answer 1

如果它是该div中唯一的p元素，那么sinply

#Hydrogen p { … }

否则，如果是第一个，

#Hydrogen p:first-child { … }

这是绝对的CSS选择器基础知识 - 所以你应该阅读一些关于这个问题的教程。

Answer 2

的内容

#hydrogen p { position:absolute; left:0; top:0;}

应该让你入门。

Answer 3

您也可以使用命令“span”。

示例：

<p><span>1</span></p>

CSS：

span { font-size:14; }

您可以使用“id”或“class”来扩展此代码。

ID-Example：

<p><span id="name">1</span></p>

CSS：

#name { font-size:14; }

类的示例：

<p><span class="large">1</span></p>

CSS：

.large { font-size:14; }

Answer 4

没有错：

#hydrogen p{..}

但正如你所说，你想做周期表，所以你将拥有103个元素，而不是你必须写的每个p元素：

#hydrogen p{..}
#helium p{...}
#lithium p{...}

...等103次，与Id的

的div相同

更好的解决方案是给p和div类名

.atomic-number{...}
.grid-cell{...}

<div class="grid-cell">
   <p class="atomic-number">1</p>
      H
   Hydrogen
   1.00794
</div>

您可以使用两行CSS

设置所有元素的样式

修改

创建行，并在其中定位元素。例如，浮动所有网格单元格，如果你需要在右侧添加一些东西，添加class =“right”（第一行）你可能需要以相同的方式改变颜色，你也可以创建不可见的单元格并用它们填充空间（第2行）

http://fiddle.jshell.net/tH7Pq/1/

如果您愿意，可以在此处阅读有关课程，ID和选择器的更多信息：

Id's and classes

multiple classes

child-and-sibling

如何定位div id中的特定元素？

4 个答案:

修改