Как выровнять кнопку и строку поиска рядом друг с другом

В настоящее время я изучаю 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>

источник

2015-05-18 marse

.mine использование не #mine (которая предназначена для ID.)

дают display:inline-block для Чилдер из 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>

источник

2015-05-18 03:05:19 Jayababu

Один из многих способов для достижения этой цели была бы поместить кнопку в своем собственном

<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/ .

Причина, по которой произошел разрыв строки, заключается в том, что существует неявный разрыв строки до и после каждой таблицы.

источник

2015-05-18 03:04:39

Как выровнять кнопку и строку поиска рядом друг с другом

ответ

Смежные вопросы