0

我正在做一个项目，我们正在学习如何设计谷歌主页。我的代码在这里：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 上的内联块

4

2 回答 2

2

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

如果您自己没有这样做，则可能是您使用的样板 CSS 导致了这种情况。

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

display:block;

或者如果您之前发现需要删除默认块显示，这也将起作用并且可能更可取：

display:inline-block;

另一种可能性可能是您的 div 包含在另一个 div 中，并且父 divoverflow设置为hidden.

于 2013-10-08T03:07:52.650 回答
1

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

display: block;
于 2013-10-08T03:01:59.097 回答