Issues with the alignment of spans

What is the reason behind the *asdf being aligned to the bottom of its parent div in the following HTML code?

<html>
<style>
.tag_editor
{
float: none;
width: 400px;
height: 33px;
border-style: solid;
border-color: #B2B2B2;
border-width: thin;
display: inline-block;
overflow: hidden;
}
</style>
<p>
<span class="tag_editor" style="">
<span>
<input type='text' style='width: 40px'/>
</span>
</span>
<span style="">*asdf</span>
</p>
</html>

Apologies for the broken jsfiddle links, I am new to sharing it:

http://jsfiddle.net/IdeaHat/y7tLZ/

htmlcss

Answer №1

The reason for this behavior is that the vertical-align property in your span tag is currently unset, causing it to default to "baseline".

Answer №2

Feel free to test out the following code snippet.

HTML

 <div>
    <span class="tag_creator" style="">
    <span>
     <input type='text' style='width: 60px'/>
    </span>
    </span>
    <span style="vertical-align:top;">*qwerty</span>
    </div>

CSS

.tag_creator
    {
    float: none;
    width: 600px;
    height: 66px;
    border-style: solid;
    border-color: #A1A1A1;
    border-width: thin;
    display: inline-block;
    overflow: hidden;
    }

jsfiddle Demo

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

Issue with fixed positioning on iPad devices

A unique feature we implemented on our site is a small control that is positioned at the bottom of the screen. However, upon viewing the site on an iPad, the control does not stay fixed at the bottom but rather floats in the middle. What's the issue ...

htmlcssipadsafari

Angular 2 presents a challenge with two-way binding in dropdowns with IE 9/10

Encountering a peculiar issue on IE 9/10 - two-way binding seems to work for all HTML elements except dropdowns. Even if the value exists in the dropdown, it does not get selected. Below is a snippet of the code: HTML <select [(ngModel)]="model.city" ...

angularhtmlinternet-explorerangular-template

Having trouble with the button's functionality in Internet Explorer?

Recently, I encountered an issue with a "dropdown button" that I created using only CSS and HTML. Surprisingly, it works flawlessly in Chrome and FireFox, but seems to have some glitches when tested on Internet Explorer (IE). The "New Invoice" button fails ...

htmlcssinternet-explorerbutton

Explore and choose JSON data for specific items depending on an array of criteria

I need to extract specific objects from a JSON file by matching them with values stored in an array. To illustrate, I have an array var list = ['test1', 'test2']; and there is a variable containing the following data: var data = [ ...

javascripthtmlarraysjsonobject

The jQuery Date Picker popup appears beneath a different element on the webpage

The Datepicker is functioning properly. https://i.sstatic.net/DKQcq.png Issue with Datepicker overlapping search box with auto-complete feature. https://i.sstatic.net/pj6T7.png I'm baffled as to why my JQuery Datepicker works flawlessly in most ca ...

javascriptjqueryhtmljquery-ui-datepicker

Having trouble displaying the cover image properly on mobile devices using Bootstrap/MDBootstrap, facing issues with the live server as well

My project includes a cover image in .jpg format that displays perfectly on desktop, but is invisible on mobile devices. When viewed through Live Server on Vscode, the image appears at all sizes including mobile, but when hosted on Netlify and accessed fro ...

htmlcssbootstrap-4material-designmdbootstrap

The canvas is being expanded by utilizing the drawImage method

Ensuring the correct size of a <canvas> element is crucial to prevent stretching, which can be achieved by setting the width and height attributes. Without any CSS applied other than background-color, I am faced with an unusual issue. Using ctx.draw ...

javascriptangularjshtmlcanvas

Center the text on a Bootstrap progress bar regardless of the progress level

In the image below, notice how the text is currently centered in the middle of the progress bars' progress. Is there a way to have this text 'overlap' the progress, stand out, and be centered across the entire width while still showing the p ...

htmlcsstwitter-bootstrap

How can I transform a variable passed from Python into HTML code?

Currently, I am delving into Django and working with a views.py file that handles the conversion of markdown to HTML. However, when passing this converted content as a variable named body into the following HTML template, the browser simply displays it as ...

pythonhtmldjangomarkdown

When using @font-face, Chrome supports it while IE and Firefox do not

I am finding this quite perplexing. I am currently using font-squirrel to download a web kit in order to display a custom font. You can access the font through this link: If you visit the homepage now: The main text in the center reads "Custom Built Webs ...

htmlcssfont-face

`Is it challenging to convert JSON into HTML, leading to undefined results?`

I am currently attempting to extract YAHOO data by utilizing getJSON and YQL. Although the connection is successful, I can retrieve the data and log it in the console. However, I am facing difficulties when trying to display this data on the JSP page I am ...

javascripthtmljson

The popup image on my main project is not functioning correctly, despite working perfectly in my test project

I am working on creating a pop-up image for my internship project. When the user clicks on an image, I want it to display in a larger size with a background and opacity. However, the code I have implemented so far is not functioning properly. Please ignore ...

javascripthtmlcssimagepopup

VueJs does not display the source code of components for users

I've recently delved into working with vueJS2 and am currently learning about components. I have a question for the experts in this field. As far as I understand, VueJS processes HTML using JavaScript, which is why the rest of the HTML code may not b ...

javascripthtmlvue.jsvuejs2vue-component

Adjust the initial position of the slider handle on the WooCommerce widget price filter

Is there a way to enhance the visibility of the woocommerce widget price filter by adjusting the starting position of the slider handle? For example, shifting it 10% towards the right from the beginning of the range bar. Check out the comparison of positi ...

phphtmlcsswordpresswoocommerce

Showing a div above another div without relying on z-index

I have designed custom drop down menus that consist of one <div> containing the current value and functioning as a <select> field, with another <div> below it that appears when the top one is clicked, displaying all the <option> val ...

htmlcssdrop-down-menuz-indexoverlap

Error message: "Issue encountered when trying to override styles in GWT DataGrid - ImageResource method value('cellTableLoading') not found"

Attempting to customize styles for the GWT DataGrid component following the instructions provided here. Here is my interface: public interface DataGridResources extends DataGrid.Resources { @Source({ DataGrid.Style.DEFAULT_CSS, "myDataGrid.css" }) DataGr ...

cssgwtdatagrid

Step-by-step guide on downloading an image in HTML with the click of a button

I have a photo gallery on my website created using PHP and HTML. I am looking to add a functionality where users can click on a button to download the image that is currently set as a background of a specific div element in the gallery. The download button ...

phphtmlcssimagedownload

Resolve the issue of text overflow in PrimeNG Turbo Table cells

When utilizing Primeng table and enabling the scrollable feature, the table is expected to display a scrollbar while ensuring that the text within the cells does not overflow. Unfortunately, this expected behavior is not occurring. To see an example of th ...

cssangularresponsive-designprimengprimeng-turbotable

Issues with refreshing the content in form fields

I am encountering issues with reloading fields, especially the datepicker in a form. The website is live at , and when I attempt to search using the search form, it works fine the first time. However, if I press the reset button before searching again, th ...

phpjqueryhtml

Creating an interactive table with interconnected column values, such as displaying all states associated with a selected country with a single click from a database or array

I am looking to create a table that displays dependent values, such as when clicking on a country, all related states should be highlighted. If there are too many states to fit in the column vertically, I want to add a scroll bar to the state column. < ...

jqueryhtmlajax