Organizing HTML input elements in a single row

Despite trying various solutions found in similar questions, I am still facing the same issue.

I have two HTML controls - an anchor tag and an input button.

I have attempted using vertical-align: top;, float: right;, display: inline-block; both independently and together, but with no success.

After clicking on Close, I noticed that a shadow appears like a button. I want both controls to be displayed inline.

At the end of the table, I added a Div like this:

<div style="float:right;">
    <asp:Button ID="btnInput" runat="server" Text="Add selected"></asp:Button><a href="#">Close</a>
</div>
c#htmlcssstylesinline

Answer №1

It's essential to define a specific width for each element when using the display:inline-block property; otherwise, they will automatically expand to 100%.

For a practical example, you can refer to this JSFiddle with similar markup that I managed to create. (Please note that ASP buttons may not function properly in this demo).

Answer №2

In order for this solution to work, Dolchio emphasized the importance of every element having the display: inline-block property. It's worth noting that using float:right will not be beneficial in this particular situation.

Consider incorporating the CssClass attribute into the asp button and customizing the styling for that class.

For instance, your code could resemble 

<asp:Button ID="btnInput" runat="server" CssClass="myButton" Text="Add selected"></asp>
, and in your css, use 
myButton{display:inline-block,vertical-align: top, width: 200px
- replacing the width with the actual button size (if unsure about the default widths of asp buttons).

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

Django project encountering issue with linking Css file

I need help linking a CSS file with my Django project. I've tried multiple methods, but I'm not seeing any changes reflected on the HTML page. As a newcomer to this, any assistance would be greatly appreciated. Below is my HTML code : {% extend ...

pythonhtmlcssdjangodjango-templates

Using the ternary operator in a Python HTML template

Exploring various python ternary operators, I came across this one: a if b else 0 However, it didn't function as expected when I attempted to integrate it into a Django HTML template. {% a if b else 0 %} Here is the specific code snippet that I pl ...

pythonhtmldjangoif-statementternary-operator

Guide to retrieve the file name into a text box upon selection (Avoid displaying as c:/fake path/)

I am trying to achieve the functionality where after choosing a file in a file input, the file name is automatically displayed in a text box named file_name without needing to click or submit any button. Unfortunately, I have been unable to find the correc ...

javascriptjqueryhtml

The Firefox form is experiencing issues when the cursor is set to 'move'

I have an HTML form with a specific code snippet: #stoppage_section .stoppage{ cursor: move; /* fallback if grab cursor is unsupported */ cursor: grab; cursor: -moz-grab; cursor: -webkit-grab; } <div id="st ...

javascriptjqueryhtmlcss

Unable to receive any feedback after sending values via AJAX and Flask

Exploring the realms of AJAX and Flask, I reached out for guidance on how to seamlessly pass values and display them without refreshing the page. A helpful pointer led me to Ajax implementation but encountered a peculiar error after customizing the suggest ...

javascriptpythonhtmlajaxflask

Adjust the height of Fullcalendar when the window is resized to maintain the aspect ratio as it shrinks

I am having trouble adjusting the height of an FC (fullcalendar) within a div. My goal is to have the FC completely fill the div without overflowing. Despite setting the height attribute during initialization, the FC's height does not resize properly, ...

javascriptjqueryhtmlcssfullcalendar

Show the email in HTML format if the client supports it; otherwise, display it as plain text

I am seeking a way to display emails as HTML if the client supports it, and as text/plain if HTML is not supported. I have written some code, but I'm unsure of how to check for multiple content types and mime types. Can anyone review my code and provi ...

c#.net

Is it possible for an absolutely positioned element to have floating elements wrapping around it?

Within my content box (#left-home-content), I have a series of paragraphs followed by a link in a <span> tag (.read-more-link), and then a <div> tag (#left-home-spread) that needs to be positioned absolutely at the bottom of the box. This may s ...

htmlcss

Unable to mouse over and select the value from the dropdown box

In order to choose a value from the drop-down menu, you must first mouse over to open the pop-up. I currently use sendKeys("Body > Abdomen"). Can someone please advise on the correct method for selecting a value from this type of drop-down box? Here i ...

htmlxpathseleniumselenium-webdriver

Clicking to close tabs

I am currently working on implementing a tab functionality on my website and I want these tabs to be responsive. Here is the code snippet I have been using: function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.ge ...

javascriptjqueryhtmlcss

Using Bootstrap to align a button and an input field on the same line within a form-control

Is there a way to ensure that the button remains on the same line as the input text in the previous forms-control? <div class="row"> <div class="form-group col-xs-6 col-md-5 "> <label for="">Name</label> <input class=" ...

htmlcssbootstrap-4

Utilizing pure CSS to target the first and last classes

I want to use pure CSS to select only the first and last classes throughout the entire document. In my scenario, the structure looks like this: <div class="Container"> <div> <div class="Parent"></div> <pre> ...

csscss-selectors

How can I achieve a fade-in effect whenever the flag image is clicked?

A unique "international" quotes script has been created, showcasing Dutch, English, German, and French quotes. The script displays different quotes every day, with a draft-result visible in the upper right corner of this page ... The code used for this sc ...

javascripthtmlcssfadein

What could be the reason behind the significant void in the grid I designed?

I'm currently learning how to utilize the grid container and have successfully created a grid with 2 images on top, 2 on the bottom, and one that stretches vertically on the left side. While I have arranged the grid as desired, I am facing an issue wi ...

htmlcsscss-grid

Ensuring form input validity in real-time using jQuery's keyup event

I've been working on a form where the user can fill in an input and press enter to move to the next field. Although I have managed to get the functionality to show the next div, I am facing issues with validation... // Moving to next div on Enter ...

javascriptjqueryhtmlcss

Tips for setting unique onComplete events for multiple lists using Mootools Sortables?

Is there a way to define specific onComplete events for multiple lists using Mootools Sortables? For example, when an item is dragged from list1 to list2, can the NAME tag of that item be changed? And if the same item is then dragged back from list2 to li ...

javascripthtmlarraysmootools

Creating a div that spans the entire height from top to bottom

Currently, I am faced with the following scenario: <div id=area> <div id=box> </div> </div> <div id=footer> </div> The "area" div is situated in the center and has a width of 700px with shadows on both the right and ...

csshtmlsize

HTML: Align DIV contents next to each other without any overlap

Below are three boxes displayed. Boxes 1 and 3 appear fine, but in box 2 the text content is overlapping. The issue lies with the <div> having the class .vertical_center.grade_info which has a specific margin-left of 100px, causing the overlap. I ne ...

htmlcssuser-interface

Apply a different background color to ion-item when it is clicked

Is there a way to change the background color of an ion-item when it is clicked by a user? Any help on how to achieve this would be greatly appreciated. Here's an example code snippet: <ion-item (click)="openDetail(variant)">{{variant.Product ...

javascriptcssangulartypescriptionic-framework

Run a JQuery function on a specific div element

Hey there, I'm currently on the hunt for a solution regarding a webpage issue. I have a function that increases a text number but what I really need is for this function to start when the section is in view. The function seems to be working just fine ...

javascriptjqueryhtml