Tips for positioning the button directly beside the search box

I'm having trouble getting the search button to align properly next to the search box. Currently, the button appears below it. Here is my current code:

        <form action="{linkto page="search.php"}" method="get" id="searchFormTest">
           <input type="text" id="searchPhrase" name="searchPhrase" class="searchInputBox" value="{$lang.enterKeywords}" placeholder="Suchbegriff oder Bildnummer">
              <div style="display: inline;">
                <button type="submit" value="Submit">
                  <i style="font-size: 40px;" class="fa fa-search" aria-hidden="true"></i>
               </button>
              </div>
        </form>
htmlcss

Answer №1

Position your search bar on the left side, position your submit button on the same side. All set.

input[type="search"],
button {
    float: left;
}

Answer №2

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <div style="display: inline;">
  <input type="text"/>
         <span>   <button type="submit" value="Submit">
                <i style="font-size: 20px;" class="fa fa-search" aria-hidden="true"></i></span>
            </button>
        </div>

this code configuration should align the icon with the search box correctly.

Answer №3

Your code is functioning perfectly on jsfiddle. It might be worth investigating the CSS styles that are affecting the button.

<form method="get" id="searchFormTest">
    <input type="text" id="searchPhrase" name="searchPhrase" class="searchInputBox" placeholder="Enter keyword or image number">
    <div style="display: inline;">
        <button type="submit" value="Submit">
            <i style="font-size: 15px;" class="fa fa-search" aria-hidden="true">Search</i>
        </button>
    </div>
</form>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Conceal and reveal content using jQuery

I'm struggling with creating a functionality to hide and show content when a user clicks on a button (checkbox). I've written some code but it's not working as expected. The issue is that the content doesn't hide when the checkbox is cl ...

jqueryhtmlcheckbox

Image not found in Rotativa PDF document

We have implemented Rotativa to generate and save a PDF version of our web page on the server. Below is the ASP.NET MVC 4 code snippet used for this purpose: var pdfResult = new ActionAsPdf("Index", new { orderId = orderValidated.orderID }) { FileName = ...

cssasp.netasp.net-mvcpdfpdf-generation

What other option is there instead of using a span tag?

Take a look at this illustration. <span id="s1">Goodbye</span> <span id="s2">cruel</span> <span id="s3">world</span> <span id="s4">this</span> <span id="s5">is</span> <span id="s6">a</sp ...

htmlcss

Calculating the computed width based on flex-basis at 0% and the flex-grow factor: what's the deal

Below is an example of HTML with default flex properties being used: <div class="container"> <div class="box"> BOX 1</div> <div class="box"> BOX 2</div> <div class="box box2"> BOX 3 .</div> </div> The ...

htmlcssflexbox

What is the process for installing and utilizing the custom CSSLint rules that I have developed for the command line interface?

After investing a significant amount of time into following the instructions outlined here and here for creating custom CSS linting rules using CSSLint via the CLI, I have successfully generated and tested my own set of rules. However, I am now facing the ...

cssnpminstallationlintcsslint

Maintaining consistent div height in Bootstrap 4 flexbox design

I'm currently using Bootstrap 4 with flexbox enabled, but I'm having trouble making the row > col > div boxes have equal heights. I attempted to use position: absolute, but it's not the ideal solution. Below is a screenshot of the is ...

htmltwitter-bootstrapcssflexbox

Executing a YUI function via HTMLJSGlobal called is feasible

Recently, I stumbled upon the Dial example on the official YUI website and was thoroughly impressed. I managed to get the function working perfectly in a JS file, but now I am facing issues trying to call it within the HTML page with specific parameters su ...

htmlfunctionyui

Processing user input in AngularJS

As I type a student's name, starting with the letter "M", the list of students should only display names starting with "M" and the rest of the word. However, the input value .length is always undefined. (function() { var app = angular.module(' ...

htmlangularjs

If the condition is based on the category in category.php and single.php

I am attempting to create a conditional statement that will display specific content only if the user is in a particular category or on a single.php page associated with that category. I have experimented with these codes, but unfortunately, neither of the ...

phphtmlwordpress

Styling Divs Beside Each Other Using CSS

I'm attempting to display the "left" and "right" divs side-by-side in the following example. However, they are not appearing next to each other as expected. Can someone point out my mistake? Thank you. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

htmlcss

Insert code into the notes section of Pug

Need help inserting a script into a comment on Pug? I have two scripts that need to be added to my website: <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="http ...

htmlexpresspug

Hide and show submenus with jQuery while ensuring that the initial submenu remains visible, along with the main menu

I am struggling to figure out how to make the first message active by default along with its corresponding menu selection in my navbar. I have implemented a show/hide functionality on the main menu click, but currently only the menu is being set as active ...

javascriptjqueryhtmlcss

What is the best way to connect users for chatting?

I am currently developing a cutting-edge chat application with a real-time communication server that allows me to send and receive messages seamlessly. The next step in my project involves mapping users for private real-time communication. I'm faced w ...

javascriptjqueryhtml

Modifying the Collapse Direction of Navigation in Bootstrap 4

Is it possible to change the collapse direction of the Bootstrap 4 navbar from 'top to bottom' to 'right to left'? Here is the code snippet I am currently using: <nav class="navbar navbar-light bg-faded"> <button class="na ...

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4

Update links within a designated div section

How can I change the color and alignment of anchor tags within the third child div that is part of a set of three nested divs? These child divs are arranged side by side within a parent div with the class .logo-bckgrnd-rpt. Although I have successfully tar ...

csscss-selectors

What is the best way to create an L-shaped CSS layout without using grid?

I am currently working with react-native and I am trying to create a layout similar to the image provided below. I want the two divs to be equal in size until the right one ends, at which point the left one should take up the entire container. I initially ...

cssreact-native

Tips for locating an element without a class assigned

I am currently utilizing the webdriverIO framework for my script, specifically working with a calendar where I need to extract only the days from the current month. Below is an excerpt of the HTML code: <tr class="daysrow"> <td class="day w ...

javascripthtmlselenium-webdriverjquery-selectorswebdriver-io

Bootstrap grid columns cannot properly handle overflowing content

Utilizing bootstrap version 5.2.3 I'm facing a challenge not with bootstrap itself, but rather my limited comprehension of the flex system and overflow. Displayed below is a scenario where the first div has a fixed height of 100vh. My goal is to kee ...

htmlcssflexboxoverflowbootstrap-5

JavaScript influences CSS in EasySlider 1.7, creating a harmonious relationship between the

Struggling to achieve a captivating overlay effect with a slider using EasySlider 1.7, incorporating both images and corresponding text. However, encountering difficulties in aligning the text correctly on the page. The black overlay visible on the main s ...

jqueryhtmlcsseasyslider

Put <options> into <select> upon clicking on <select>

Is there a way to automatically populate a <select> list upon clicking on it? $(document).ready(function(){ $("body").on("click", "select", function(){ ajax(); //function to add more <option> elements to the select }); }); Loo ...

javascripthtmljquery