gpt4 book ai didi

html - 如何在 CSS 中定位图像

转载 作者:太空宇宙 更新时间:2023-11-04 12:34:50 24 4
gpt4 key购买 nike

我不确定如何准确描述我要问的内容,基本上我需要将图像向左对齐,但是从左边 6px(第 38 行,边距:10px 10px 10px 6px)。

代码如下:

.rounded {
width:100%;
height:100px;
background-color:#95b7fd;
border-radius:100px;
z-index:0;
}

.rounded-input {
margin-top:5px;
width:90px;
height:90px;
border-radius:100px;
border:0;
margin-left:-80px;
font-weight:700;
background-color:#fff;
}

.rounded-box {
width:98.4%;
height:90px;
border-radius:100px;
border:0;
background-color:#3574f9;
opacity:1;
text-align:center;
color:#FFF;
margin-left:auto;
margin-right:auto;
}

.icon {
height:80px;
width:auto;
position:absolute;
border-radius:100px;
margin:10px 10px 10px 6px;
}
<html>
<head>
<title>LsrW's Go2 Links</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>

<form method="get" action="http://www.google.co.uk/search" class="rounded">
<img class="icon" src="images/search_Google.png"/>
<center>
<input name="q" maxlength="255" class="rounded-box"><input value="Search" type="submit" class="rounded-input">
</form>
<form method="get" action="http://www.google.co.uk/search" class="rounded">
<img class="icon" src="images/search_Google.png"/>
<center>
<input name="q" maxlength="255" class="rounded-box"><input value="Search" type="submit" class="rounded-input">
</form>
</body>
</html>

在此处预览问题:link (http://lsrw.co.uk/slider/)。

正如您在链接中看到的(或者如果您预览代码,它可能会或可能不会正确显示,具体取决于窗口的大小),第一个搜索框与左侧的图像一起正常工作,但是第二个没有。

有人知道如何解决这个问题吗? (另外:我愿意接受有关如何改进其中大部分内容的建议,我对 CSS 还比较陌生)。

谢谢,
- 卢克

编辑:这很容易修复,很抱歉这个愚蠢的问题——我完全忘记了我已经添加了一个标签,在表单中关闭它完全修复了它。

最佳答案

问题是<center>标签没有关闭。这会导致未定义的行为。

尝试关闭两个中心标签:

        <form method="get" action="http://www.google.co.uk/search" class="rounded">
<img class="icon" src="images/search_Google.png"/>
<center>
<input name="q" maxlength="255" class="rounded-box"><input value="Search" type="submit" class="rounded-input">
</center>
</form>
<form method="get" action="http://www.google.co.uk/search" class="rounded">
<img class="icon" src="images/search_Google.png"/>
<center>
<input name="q" maxlength="255" class="rounded-box"><input value="Search" type="submit" class="rounded-input">
</center>
</form>

关于html - 如何在 CSS 中定位图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27366365/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com