Question

#google1 {
  width: 30%;
  height: 30%;
}
#google {
  text-align: center;
  margin: 200px auto;
  position: relative;
}
#gsearch {
  height: 30px;
  width: 50%;
}
#form {
  text-align: center;
  top: -30px;
  position: relative;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: inline;
}
li {
  float: left;
}
a {
  display: block;
  width: 60px;
  color: #7e7070;
}
a:link {
  text-decoration: none
}
a:visited {
  text-decoration: none
}
#topbar {
  position: relative;
  right: 0;
  top: 0;
  margin-right: 200px;
}
#grid,
#bell {
  opacity: 0.4;
}

<html>
<head>
    <meta charset="utf-8"/>
    <title>GOOGLE</title>
    <link rel="stylesheet" href="styleg.css"/>
</head>
<body>
<div id="wrapper">
    <div id="google">
        <img src="google1.jpg" img id="google1" alt="google1"/>

        <div id="form">
            <form action="" method="post" name="gsearch"></form>
            <input type="text" input id="gsearch" name="gsearch">
        </div>
    </div>
</div>
<div id="topbar">
    <ul>
        <li><a href="#">Shan</a></li>
        <li><a href="#">Gmail</a></li>
        <li><a href="#">Images</a></li>
        <li><a href="#"><img src="grid.png" alt="grid" img id="grid"></a></li>
        <li><a href="#"><img src="bell.png" alt="bell" img id="bell"></a></li>
    </ul>
</div>
</body>

我想要做的是将bell.png和grid.png与google主页的右上角的其他文字链接对齐。

现在它显示在左下角内联。我已经尝试过绝对定位，但是我必须通过顶部和左侧调整对其进行微调以使其正确。

问：有没有更简单的方法将整个区块移到右上方并对齐？

HTML

<html>
<head>
    <meta charset="utf-8"/>
    <title>GOOGLE</title>
    <link rel="stylesheet" href="styleg.css"/>
</head>
<body>
<div id="wrapper">
    <div id="google">
        <img src="google1.jpg" img id="google1" alt="google1"/>

        <div id="form">
            <form action="" method="post" name="gsearch"></form>
            <input type="text" input id="gsearch" name="gsearch">
        </div>
    </div>
</div>
<div id="topbar">
    <ul>
        <li><a href="#">Shan</a></li>
        <li><a href="#">Gmail</a></li>
        <li><a href="#">Images</a></li>
        <li><a href="#"><img src="grid.png" alt="grid" img id="grid"></a></li>
        <li><a href="#"><img src="bell.png" alt="bell" img id="bell"></a></li>
    </ul>
</div>
</body>

CSS 代码如下：

#google1{
    width:30%;
    height:30%;
}

#google{
    text-align: center;
    margin:200px auto;
    position: relative;
}

#gsearch{
    height:30px;
    width:50%;
}

#form{
    text-align: center;
    top:-30px; position:relative;       
}

ul{
    list-style-type:none; 
    margin:0;
    padding:0;
    display:inline;
}

li{
    float:left;
}

a{
    display:block;
    width:60px;
    color:#7e7070;
}     

a:link{text-decoration: none}  
a:visited{text-decoration: none}

#topbar{        
    position:relative; right:0; top:0; margin-right: 200px;     
}

#grid, #bell{opacity:0.4;}

Answer 1

在您的代码中，position: absolute是可行的方法。

＆＃13;

#google1 {
  width: 30%;
  height: 30%;
}
#google {
  text-align: center;
  margin: 200px auto;
  position: relative;
}
#gsearch {
  height: 30px;
  width: 50%;
}
#form {
  text-align: center;
  top: -30px;
  position: relative;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: inline;
}
li {
  float: left;
}
a {
  display: block;
  width: 60px;
  color: #7e7070;
}
a:link {
  text-decoration: none
}
a:visited {
  text-decoration: none
}
#topbar {
  position: absolute;
  right: 0;
  top: 0;
}
#grid,
#bell {
  opacity: 0.4;
}

＆＃13;

<html>
<head>
    <meta charset="utf-8"/>
    <title>GOOGLE</title>
    <link rel="stylesheet" href="styleg.css"/>
</head>
<body>
<div id="topbar">
    <ul>
        <li><a href="#">Shan</a></li>
        <li><a href="#">Gmail</a></li>
        <li><a href="#">Images</a></li>
        <li><a href="#"><img src="grid.png" alt="grid" img id="grid"></a></li>
        <li><a href="#"><img src="bell.png" alt="bell" img id="bell"></a></li>
    </ul>
</div>
<div id="wrapper">
    <div id="google">
        <img src="google1.jpg" img id="google1" alt="google1"/>

        <div id="form">
            <form action="" method="post" name="gsearch"></form>
            <input type="text" input id="gsearch" name="gsearch">
        </div>
    </div>
</div>

</body>

＆＃13;

Answer 2

我重新构建了HTML并修改了CSS，将nav元素放在右上角。我在text-align:right上设置#topbar，以便项目与右侧对齐。我还将<li>元素设置为display:inline-block，以便它们全部显示在同一行但仍然接受一些margin。

＆＃13;

#google1 {
  width: 30%;
  height: 30%;
}
#google {
  text-align: center;
  margin: 200px auto;
  position: relative;
}
#gsearch {
  height: 30px;
  width: 50%;
}
form#search_form {
  text-align: center;
  top: -30px;
  position: relative;
}

#topbar {
  text-align:right;
}
#topbar ul {
  list-style:none;
  margin: 0;
  padding: 0;
}
#topbar ul li {
  display:inline-block;
  vertical-align:middle;
  margin:0 0 0 1em;
}
#topbar ul li a {
  color: #7e7070;
  text-decoration: none
}


#topbar ul li a #grid,
#topbar ul li a #bell {
  opacity: 0.4;
}

＆＃13;

<div id="topbar">
  <ul>
    <li><a href="#">Shan</a></li>
    <li><a href="#">Gmail</a></li>
    <li><a href="#">Images</a></li>
    <li><a href="#"><img src="grid.png" alt="grid" img id="grid"></a></li>
    <li><a href="#"><img src="bell.png" alt="bell" img id="bell"></a></li>
  </ul>
</div>
<div id="wrapper">
  <div id="google">
    <img src="google1.jpg" id="google1" alt="google1" />
    <form action="" method="post" name="gsearch" id="search_form">
      <input type="text" input id="gsearch" name="gsearch">
    </form>
  </div>
</div>

＆＃13;

如何将内联项目移动到右上角？

2 个答案: