另一个里面有多个街区

时间:2013-03-12 00:03:45

标签: html css

我正在尝试将我的名字放在包含网站名称的另一个区域内,但无法弄明白。我可以使用什么?

我正试图让我的网站名称后面有一个较小的扩展名,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/

2 个答案:

答案 0 :(得分:3)

这就是你想要实现的目标

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);
}

工作demo

答案 1 :(得分:0)

名称上的边距。

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