html - 另一个里面有多个块？

Question

我试图将我的名字放在另一个包含网站名称的块中，但无法弄清楚。我可以使用什么？

我正在尝试使用较小的扩展名来获取我的网站名称，shich 工作。但后来我想在它下面没有我的名字，中间没有空格。

<div id="sitename">
  <span id="address">website</span>
  <span id="extension">.blah</span>
  <span id="name">namegoeshere</span>
</div>

#sitename {
  width: 330px;
  margin: 35px auto 0 auto;
  text-align: center;
  cursor: default;
}

#address {
  display: inline-block;
  height: 65px;
  font-size: 50pt;
  font-weight: 800;
  color: rgb(99,99,99);
}

#extension {
  display: inline-block;
  height: 65px;
  font-size: 30pt;
  font-weight: 800;
  color: rgb(99,99,99)
}

#name {
  display: block;
  width: 72%; 
  text-align: right;
  font-size: 11.5pt;
  font-weight: 500;
  color: rgb(99,99,99);
}

小提琴：http: //jsfiddle.net/CX5Dn/

Answer 1

这是你想要达到的目标吗

html

<div id="sitename">
  <span id="address">website<span id="extension">.blah</span></span>
  <span id="name">namegoeshere</span>
</div>

css

#sitename {
  width: 330px;
  margin: 35px auto 0 auto;
  text-align: center;
  cursor: default;
}

#address {
  display: inline-block;
  height: 65px;
  font-size: 50pt;
  font-weight: 800;
  color: rgb(99,99,99);
}

#extension {
  display: inline-block;
  height: 65px;
  font-size: 30pt;
  font-weight: 800;
  color: rgb(99,99,99)
}

#name {
  display: block;
  width: 72%; 
  text-align: right;
  font-size: 11.5pt;
  font-weight: 500;
  color: rgb(99,99,99);
}

工作演示

Answer 2

名称的边距。

#name {
display: block;
width: 72%; 
text-align: right;
font-size: 11.5pt;
font-weight: 500;
color: rgb(99,99,99);
margin-top: -20px;
}