Question

我正在做一个项目，我们正在学习如何设计谷歌主页。我的代码在这里：http://jsfiddle.net/HgpQW/。我意识到我的工作远未完成，但我希望有人可以帮助我做一件事：为什么我不能扩展“登录”元素？我试图在css中设置宽度和高度，但它没有效果。

<header> 
  <ul id="headerlist"> 
    <li>+You</li>
    <li>Gmail</li>
    <li id="grid">
    <li id="sign_in"> 
      <div id="sign_in">
        <span>SIGN IN</span>
      </div>
    </li>
  </ul>
</header>

__

body {
  font-family:sans-serif;
  font-size: 12px;
  letter-spacing: .5px;
}

header {
  position: absolute;
  right: 0;
  top: 0;
  margin-top: 11px;
}

ul {
  list-style-type: none;
}

li, li div {
  display:inline
}

#headerlist li {
  padding-right: 6px;
}

#sign_in {
  display:block;
  background-color: #DA4531;
  color: white;
  height: 35px;
  width: 80px;
}

编辑：解决方案是#sign_in li

上的内联阻止

Answer 1

<div>个元素通常有display：block;已应用但您必须以某种方式将其更改为display:inline;

如果你自己没有这样做，它可能是你使用的一个样板CSS导致了这个。

为了能够调整宽度，请将显示更改为：

display:block;

或者这也可以，如果你以前发现需要删除默认的块显示，可能会更好：

display:inline-block;

另一种可能是你的div包含在另一个div中，并且父级div overflow设置为hidden。

Answer 2

如果没有指向特定小提琴的链接，则很难具体回答您的问题。仅从你的描述中，我猜它可能需要这个css：

display: block;

不能在div上设置宽度和高度

2 个答案: