#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 与谷歌主页右上角的其他文本链接对齐。
现在它显示在左下角内联。我已经尝试过绝对定位，但我必须通过顶部和左侧调整对其进行微调才能使其正确。
问:是否有更简单的方法将整个 block 移动到右上角并对齐？
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;}
最佳答案
在您的代码中，position: absolute 是要走的路。
#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;
}<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>关于html - 如何将内联元素移动到右上角？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30656549/