I have a text field and want to place a button right next to it.
Here is the code I am using:
<input class="txt" type="text" name="name">
<button class="btn">Submit</button>
.txt {
display: inline-block;
width: 80%;
outline: none;
margin:0;
}
.btn {
display: inline-block;
width: 20%;
margin:0;
}
However, there is still some spacing between the two elements. How can I get rid of this gap?
Thank you!
To eliminate the space without using negative margin-left, try putting your HTML content inline.
<input class="txt" type="text" name="name"><button class="btn">Submit</button>
If you want to align them in a horizontal row, consider giving less percentage to the input element.
Check out the demo - http://jsfiddle.net/RahulB007/rm9etsny/5/
One reason for the issue is that inline-block elements create extra spacing between them. This can be avoided by using float:left or adding a parent element with font-size:0. Another solution is to use box-sizing:border-box, which applies padding from inside the element.
For example, if an element has a width of 100% and a padding of 15px, the total width will be 100% + 15px when using box-sizing:border-box.
In this demonstration, the border style has been changed to outset.
Check out the demo here - http://example.com/demo
body {
background-color: blue;
}
div {
font-size:0;
}
.txt {
display: inline-block;
width: 80%;
font-size: 2em;
outline: none;
padding: 15px;
margin:0;
box-sizing:border-box;
}
.btn {
display: inline-block;
margin: 0;
outline: 0 none;
padding: 0;
width: 20%;
box-sizing:border-box;
}<div>
<input class="txt" type="text" name="name" />
<button class="btn">Submit</button>
</div>Make adjustments to meet your needs by modifying the values.
.txt{
border:1px dotted black;
color:black;
height:60px;
width:450px;
left:40%;
position:absolute;
}
.btn{
background:black;
border:1px solid black;
color:white;
height:50px;
width:70px;
top:5%;
right:35%;
position:absolute;
}
To create a negative margin-top on the .btn selector, you can use the following CSS code:
margin-top: -5px;
I am working with a basic HTML document that looks like this... <ol> <li><strong>Test 1</strong></li> <li><strong>Test 2</strong></li> </ol> ...and I am attempting to connect it to a div ...
I am facing a challenge with validating a dynamic form on the user side. My goal is to ensure that if a user fills out one column in a row, they are required to fill out the remaining columns as well. For example, filling out the CC # should prompt the use ...
My goal is to create a function that generates a grid based on table data. While the function itself seems to be working, I am encountering an issue where the classes applied are not resulting in any style changes. Below is a snippet of my function: $(doc ...
My autohotkey script is designed to search for a word in a bilingual dictionary when I double click on any word within a webpage. However, I am facing an issue where the script also copies the characters preceding the apostrophe when clicking on words like ...
After following a todo list tutorial, everything was running smoothly until I decided to add some styling to it. I placed a Font Awesome trash can icon inside a button with the class "remove." Essentially, I removed all the styles from the button, leaving ...
Currently, I have implemented TinyMCE as the editor for my PHP-based website. However, I am facing a challenge in integrating pagination within the editor. My goal is to allow users to input long content that will be displayed across multiple pages inste ...
I am currently developing a game using HTML/JavaScript, and I have implemented a "special ability" that can only be activated once every x seconds. To indicate when this ability is available for use, I have created a graphical user interface element. Since ...
I have a code that generates numbers like 030317-001 to 030317-010 in a list. How can I modify it so that the same sequence is generated with just one button click, without any repeats, up to a maximum of say 030317-099? <?php $x = date("dmy");// ...
As someone who is new to JavaScript, I find it challenging to grasp the concept, especially when incorporating it with HTML. Despite this, I decided to experiment with infinite ajax scroll functionality. Below is my code snippet: var ias = jQuery.ias({ ...
Although it may seem like a basic question, I have never encountered this particular task before. My designer is requesting something similar to this design for checkboxes (positioned on the left side with grey for checked boxes and white for unchecked). ...
Here is the HTML page I am working with: Click here to view the code on jsfiddle <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Extended UI</title> <style type="text/css"> .header{ padding-rig ...
I am currently working on a social networking site where I am trying to add three menu dots in the top right corner of each post made by a user. However, I am facing an issue where the dropdown menu only appears for the very first post at the top of the pa ...
I have created a partial view and added the rendering in the Index page. A button (See More) triggers an AJAX call to the controller each time it is clicked, appending new data to the screen. The issue arises when there are no results left to display, and ...
I've been searching everywhere and can't find a good tutorial on how to smoothly transition pages when clicking a link on my website. I want the page to fade out on click, display a preloader, then fade in the new page once the preloader finishes ...
I've created a ShowcaseMovie component that fetches data using componentDidMount(), stores it in state, and renders Card components to display the data. The component also features four button elements for toggling between different filters: upcoming, ...
There is this element: <a id="lnkViewEventDetails" class="psevdo calendar-event event" style="height: 126px;" href="/someurl/895?responseType=5" onclick="event.stopPropagation();"> I am trying to make it resizable using JQuery UI: $("#lnkViewEvent ...
Is it possible to change the background color and icon color when clicking on the bar (active bar)? If not, is there an option to switch the icon with a different color? I've tried modifying my code but haven't seen any changes. Instead of using ...
I am currently working on making a desktop-sized website responsive. However, I have encountered an issue where the CSS rule is being read by the browser but not executed, regardless of whether the media query rule is true or not. I have already included & ...
Within our Rails 3.2 app, I've implemented Sass imports to manage the majority of our styles. The structure of my application.css.scss file is as follows: application.css /* *= require_self *= require_tree ./vendor *= require admin */ admin.css ...
Is it possible to create an input field that automatically places a decimal point after the second character? For example, when a user enters 4, it would display as 4.11. I have tried using jQuery validation with patterns, but I can't seem to figure o ...