Question

我正在尝试复制BBC网站。我几乎完成了导航栏样式的第一部分。

我在更多部分的最后部分和使用该三角箭头时遇到问题。一旦我插入那个箭头，它就会破坏我的设计，任何帮助都会受到赞赏。

如果您在上图中注意到，文本“更多”和三角形箭头稍微低于其他元素。但是，如果我从代码中删除该三角形箭头，“更多”与其他箭头完全对齐。所以，我无法解决这个问题，即导航栏中的其他标签具有更多和箭头相同的对齐方式。

另外我想知道我们是否可以设置placeholder值？以下是供参考的代码。

body,
p,
div,
ul,
li,
span,
input {
  margin: 0px;
  padding: 0px
}
body {
  margin: 0px;
  color: #FFFFFD;
  font-family: Arial, Helvetica, freesans, sans-serif;
  background-color: #E7E8E1;
}
#topnav {
  background-color: black
  /*#7a0000*/
  ;
  width: 100%;
  height: 41px;
}
.page-width {
  width: 1268px;
  margin: 0px auto;
}
#topnav-logo {
  padding: 5.5px 14px 2px 0px;
  float: left;
  border-right: 1px solid #666666;
}
#topnav-signin {
  font-stretch: semi-expanded;
  font-size: 13px;
  font-weight: 600;
  padding: 1px 87px 13px 13px;
  border-right: 1px solid #666666
  /*black*/
  ;
  float: left;
}
#topnav-signin img {
  position: relative;
  top: 7px;
  padding-right: 1px;
}
#topnav-menu {
  float: left;
}
#topnav-menu li {
  list-style-type: none;
  font-weight: 600;
  font-size: 13px;
  padding: 13px 20px 12px 20px;
  border-right: 1px solid #666666;
  float: left;
}
#topnav-menu ul li span {
  position: relative;
  top: 1px;
  padding-left: 57px
}
#topnav-search {
  float: left;
  padding: 0px 0px 2px 18px;
}
#topnav-search input {
  padding-top: 0px;
  padding-left: 7px;
  height: 24px;
  width: 143px;
  font-weight: 600;
  color: black;
  border: none;
  vertical-align: middle
}
#topnav-search img {
  position: relative;
  top: 8px;
}

<!doctype html>
<html>

<head>
  <title>My BBC</title>
</head>

<body>
  <div id="container">
    <div id="topnav">
      <div class="page-width">
        <div id="topnav-logo">
          <img src="images/bbclogo.PNG" />
        </div>
        <div id="topnav-signin">
          <p>
            <img src="images/signinlogo.PNG" />Sign in</p>
        </div>
        <div id="topnav-menu">
          <ul>
            <li>News</li>
            <li>Sport</li>
            <li>Weather</li>
            <li>Shop</li>
            <li>Earth</li>
            <li>Travel</li>
            <li>Capital</li>
            <li>Culture</li>
            <li>More<span>&#9654</span>
            </li>
          </ul>
        </div>
        <div id="topnav-search">
          <input type="text" placeholder="Search" />
          <img src="images/search.PNG" />
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Answer 1

箭头的问题与内联垂直对齐的乐趣有关，如果你看一下在chrome的元素检查器（开发人员工具）中放置了跨度块的位置，它比它旁边的文本低几个像素。

通常这样的问题与块的高度以及它与相邻块对齐的位置有关。在这种情况下，修复它的简单方法是将父级设置为固定高度，现在一切都很好并且水平。

如果您还没有看过chrome的元素检查器，我强烈建议您查看它，它可以让您轻松查看工作原理并动态修改它们。 safari和firefox都有类似的工具。我学到的大部分内容来自于使用它来弄清楚某些网站如何处理反复试验。

body,
p,
div,
ul,
li,
span,
input {
  margin: 0px;
  padding: 0px
}
body {
  margin: 0px;
  color: #FFFFFD;
  font-family: Arial, Helvetica, freesans, sans-serif;
  background-color: #E7E8E1;
}
#topnav {
  background-color: black
  /*#7a0000*/
  ;
  width: 100%;
  height: 41px;
}
.page-width {
  width: 1268px;
  margin: 0px auto;
}
#topnav-logo {
  padding: 5.5px 14px 2px 0px;
  float: left;
  border-right: 1px solid #666666;
}
#topnav-signin {
  font-stretch: semi-expanded;
  font-size: 13px;
  font-weight: 600;
  padding: 1px 87px 13px 13px;
  border-right: 1px solid #666666
  /*black*/
  ;
  float: left;
}
#topnav-signin img {
  position: relative;
  top: 7px;
  padding-right: 1px;
}
#topnav-menu {
  float: left;
}
#topnav-menu li {
  list-style-type: none;
  font-weight: 600;
  font-size: 13px;
  padding: 13px 20px 12px 20px;
  border-right: 1px solid #666666;
  float: left;
}
#topnav-menu ul li span {
  position: relative;
  top: 1px;
  padding-left: 57px;
  
}
#topnav-search {
  float: left;
  padding: 0px 0px 2px 18px;
}
#topnav-search input {
  padding-top: 0px;
  padding-left: 7px;
  height: 24px;
  width: 143px;
  font-weight: 600;
  color: black;
  border: none;
  vertical-align: middle
}
#topnav-search img {
  position: relative;
  top: 8px;
}

<!doctype html>
<html>

<head>
  <title>My BBC</title>
</head>

<body>
  <div id="container">
    <div id="topnav">
      <div class="page-width">
        <div id="topnav-logo">
          <img src="images/bbclogo.PNG" />
        </div>
        <div id="topnav-signin">
          <p>
            <img src="images/signinlogo.PNG" />Sign in</p>
        </div>
        <div id="topnav-menu">
          <ul>
            <li>News</li>
            <li>Sport</li>
            <li>Weather</li>
            <li>Shop</li>
            <li>Earth</li>
            <li>Travel</li>
            <li>Capital</li>
            <li>Culture</li>
            <li>More<span>&#9654</span>
            </li>
          </ul>
        </div>
        <div id="topnav-search">
          <input type="text" placeholder="Search" />
          <img src="images/search.PNG" />
        </div>
      </div>
    </div>
  </div>
</body>

</html>

复制BBC网站

1 个答案: