Question

我目前正在学习HTML和CSS。我的问题是：我有一个按钮和一个搜索栏，搜索栏当前位于按钮下方。我尝试了不同的解决方案，但无济于事。我应该怎么做才能使按钮和搜索栏彼此相邻这是我的代码

<!DOCTYPE html>
<html>
<head>
<title>Sample Dashboard</title>
<style type="text/css">

table, th, td {
border: 1px solid black;

}

p.pos_right {
position: relative;
left: 20px;
}

img {
display: inline-block;
z-index:-1;
}

#mine{
display: inline;
}


</style>
</head>
<body>
<div style="text-align:center;">    
<p>Most Number of Referrals for the month of <img src="Red-Ribbon.jpg" alt="redribbon" width="200" height="200" style="vertical-align:top"> </p>
</div>

<div class = "mine" align ="center">
<button style="background-color:yellow" onclick="window.location.reload()"><b>UPDATE</b></button>
<table class = "one" style=border="1" cellpadding="0px" cellspacing="0px">
<tr> 
<td style="border-style:solid none solid solid;border-color:#4B7B9F;border-width:1px;">
<input type="text" name="zoom_query" style="width:100px; border:0px solid; height:17px; padding:0px 3px; position:relative;"> 
</td>
<td style="border-style:solid;border-color:#4B7B9F;border-width:1px;"> 
<input type="submit" value="" style="border-style: none; background: url('searchbutton3.gif') no-repeat; width: 24px; height: 20px;">
</td>
</tr>
</table>
</div>
</body>
</html>

Answer 1

使用.mine而不是#mine（用于ID。）

为display:inline-block

的childer提供mine

.mine>button,.mine>table{
display: inline-block;float:left;
}

table, th, td {
border: 1px solid black;

}

p.pos_right {
position: relative;
left: 20px;
}

img {
display: inline-block;
z-index:-1;
}

.mine>button,.mine>table{
display: inline-block;float:left;
}

refer below code snippet.

<div style="text-align:center;">    
<p>Most Number of Referrals for the month of <img src="Red-Ribbon.jpg" alt="redribbon" width="200" height="200" style="vertical-align:top"> </p>
</div>

<div class = "mine" align ="center">
<button style="background-color:yellow" onclick="window.location.reload()"><b>UPDATE</b></button>
<table class = "one" style=border="1" cellpadding="0px" cellspacing="0px">
<tr> 
<td style="border-style:solid none solid solid;border-color:#4B7B9F;border-width:1px;">
<input type="text" name="zoom_query" style="width:100px; border:0px solid; height:17px; padding:0px 3px; position:relative;"> 
</td>
<td style="border-style:solid;border-color:#4B7B9F;border-width:1px;"> 
<input type="submit" value="" style="border-style: none; background: url('searchbutton3.gif') no-repeat; width: 24px; height: 20px;">
</td>
</tr>
</table>
</div>

Answer 2

实现这一目标的众多方法之一是将按钮放在自己的

中

<td>

表格行内的标签。即。

<table class = "one" style=border="1" cellpadding="0px" cellspacing="0px">
<tr> 
<td>
    <button style="background-color:yellow" onclick="window.location.reload()"><b>UPDATE</b></button>
</td>
...

参见https://jsfiddle.net/orndorffgrant/189judf0/

换行的原因是每个表之前和之后都存在隐式换行符。

如何将按钮和搜索栏对齐

2 个答案: