Question

我正在尝试学习CSS，作为其中的一部分，我正在尝试重新创建菜单 news.ycombinator.com没有看实际页面上的组织方式。

这是我的css

body{
margin:0; 
}

#outerdiv {
height:100%;
border-left: 2px solid #fcfaf4;
border-right: 2px solid #fcfaf4;
background:#fcfaf4;
position: relative;
left: 15%;
width:70%;
}

#menudiv{
background-color: rgb(255, 102, 0);
height:4%;
width:100%;
white-space:nowrap;
}

#ycimage{
border: 1px solid white;
width="18";
height="18";
padding:1px;
position: relative;
left:2px;
top:2px;
margin:2px;
}

p{
    white-space:nowrap;
}

我的HTML

<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="outerdiv">
    <div id ="menudiv">
        <img src="y18.gif" id="ycimage" >
            <p> 
                <b id="companyname" >Hacker News </b>
                |
                new
                |
                comments
                |
                show
            </p>
    </div>

</div>

</body>

我试图在div“menudiv”中的

元素上定义nowrap属性 HOwever，黑客新闻这个词出现在新线上，在图像之后。我怎么能把它放在同一条线上？

Answer 1

这是因为用于段落并用新行清除它的两侧。删除或使用Display

将其设置为内嵌对象

有些事情：

p{display:inline;}

Answer 2

请考虑使用代码而不是代码。

Answer 3

我认为你无法实现你所尝试的方式。

使元素显示：inline-block。

body {
  margin: 0;
}
#outerdiv {
  height: 100%;
  border-left: 2px solid #fcfaf4;
  border-right: 2px solid #fcfaf4;
  background: #fcfaf4;
  position: relative;
  left: 15%;
  width: 70%;
}
#menudiv {
  background-color: rgb(255, 102, 0);
  height: 4%;
  width: 100%;
}
ul {
  list-style-type: none;
  display: inline-block;
  margin: 0;
}
ul li {
  display: inline-block;
}
#ycimage {
  border: 1px solid white;
  width: 18px;
  height: 18px;
  padding: 1px;
  position: relative;
  left: 2px;
  top: 2px;
  margin: 2px;
}

<div id="outerdiv">
  <div id="menudiv">
    <img src="y18.gif" id="ycimage">

    <ul>
      <li> <b id="companyname">Hacker News | </b>
      </li>
      <li>new <strong>|</strong>
      </li>
      <li>comments <strong>|</strong>
      </li>
      <li>show</li>
    </ul>
  </div>

希望有所帮助

Answer 4

规则white-space:nowrap;仅适用于内联级别元素。 是块级别，因此无效。如果需要，您可以将其设置为p {display:inline-block;}，或者使用内联级标记。事实上，在你的情况下，你真的不需要它们，例如：

body {
  margin: 0;
}
#menudiv {
  background-color: #f60;
  padding: 2px;
}
#ycimage {
  vertical-align: bottom;
  border: 1px solid #fff;
}
#companyname {
  margin-right: 10px;
}

<div id="outerdiv">
  <div id="menudiv">
    <img src="https://news.ycombinator.com/y18.gif" id="ycimage">
    <b id="companyname">Hacker News </b> new | comments | show
  </div>
</div>

为什么我使用nowrap的方式不起作用？

4 个答案: