The <span> element stubbornly resists aligning inline within a flexbox container

Within a flexbox a element, I have a div that contains a span with the class .time-pretext:

<a class="option-container option-edit-time" href="#">
  <div class="option-icon"><canvas id="time-canvas" width="128" height="128"></canvas></div>
  <div class="option-text"><span class="time-pretext">I have</span>60 minutes</div>
</a>

The .option-text element is styled with flex-direction: column. This causes the span to only accept block display options (block or -webkit-box) and not inline options (inline-block). Why is this happening?

Interestingly, this issue arises only in the latest flexbox implementation (display: flex), and not in the original one (display: -webkit-box).

htmlcssflexbox

Answer №1

It seems that the .option-text class is set to display:flex, as without this setting, applying flex-direction would not have any effect. In this case, the behavior you are observing is actually mandated by the flexbox specification - all children of a flex container are required to have a block-based display type.

According to the specification:

each child of a flex container becomes a flex item [...] The computed ‘display’ of a flex item is determined by applying the table in CSS 2.1 Chapter 9.7

Source: http://www.w3.org/TR/css3-flexbox/#flex-items

This table, referenced from CSS 2.1, essentially converts non-block elements to block elements.

If you wish to change this behavior, you can simply wrap your <span> within a <div>. This way, the <div> will become the flex item, allowing the <span> to retain its original display type.

Answer №2

The response provided by @dholbert is indeed accurate. Nonetheless, I came across an alternate solution that proved effective for me in Chrome, Edge, and Firefox browsers. The key is to adjust the display CSS property to contents.

For your specific situation, the CSS code would be:

span.time-pretext {
    display: contents;
}

Alternatively, for a more universal solution:

CSS:

span.flex-inline {
    display: contents;
}

HTML:

<a class="option-container option-edit-time" href="#">
  <div class="option-icon"><canvas id="time-canvas" width="128" height="128"></canvas></div>
  <div class="option-text"><span class="flex-inline time-pretext">I have</span>60 minutes</div>
</a>

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

Attempting to trigger CSS transitions using JavaScript will not be successful

I'm facing an issue where CSS transitions do not work as expected when triggered by JavaScript. let isSearchBarOpen = false; function toggleSearchBar() { if (isSearchBarOpen) { searchBar.style.display = "none"; } else { searchBar.sty ...

javascripthtmlcsscss-transitionsdom-manipulation

Modify the animation on Material UI Autocomplete with an underline effect

In my project, I am utilizing a Material UI Autocomplete component for the "Faculdade" field. Nonetheless, I have observed that the animation/transition effect when this component is focused involves spreading from the middle outwards. I desire the animati ...

cssreactjsanimationautocompletematerial-ui

Unlock maximum screen viewing on your custom video player with these steps to activate fullscreen

I'm having an issue with my basic video player - when toggling fullscreen, it doesn't fill the whole screen even though I tried using .fullscreen{width:100%} without success after searching for a solution. html <div class='player-contai ...

javascripthtmlcss

Find all elements with the same class and identify the first element among them using jQuery

In my dynamic data structure, I need to filter out all elements with the class name "My_data" and select the first one. In the code below, I am looking to retrieve the first element with the class "My_data". <div class="all_data"> <div class="lis ...

javascriptjqueryhtmljquery-selectorsjquery-filter

Assigning a price to a list of pizza options within a dropdown menu

//The goal is to assign a numerical price to each pizza in the array. We must maintain the structure of the array within the select form. Next, we need to display it in another PHP file, how do we retrieve the values? <fieldset> ...

phphtmlarraysformsselect

React app (storybook) experiencing loading issues with @font-face

I am struggling to load custom fonts from a local directory. Can someone provide assistance? Below is the code I am currently using: @font-face { font-family: 'My Custom Font'; src: url('./fonts/MyCustomFont.eot'); src: url(&apo ...

javascriptcssreactjsfontsstorybook

Exploring an XML document with HTML

I have an XML file that is paired with an XSL file. The resulting output can be located here. I am working on creating an HTML webpage where users can input a search query, such as 'Year < 2009', into a search box. The table above will then d ...

javascripthtmlxmlxsltfiltering

Display or conceal content based on checkbox status

i am trying to create a system where content is hidden by default and only displayed when a checkbox is checked. The goal is to show the content when the checkbox is checked and hide it when unchecked, so that other content can be shown as well upon checki ...

htmlcss

Eliminating duplicate data submissions with jQuery Ajax

Encountering an issue with my jQuery AJAX submission process. JavaScript: $('#myform').submit(function () { if (validateEvenInputs()) { $('#btnevent').attr('disabled', 'disabled'); function ...

phpjavascriptjqueryhtmlajax

Tips for utilizing the radio type in ng-repeat and deciding on the appropriate ng-model

I have 10 inquiries for a survey, each requiring a yes or no response. I want to utilize radio options and display these questions using ng-repeat. How can I achieve this? What should I set as the ng-model for each question? <form> <div ng-init= ...

htmlangularjsradio-button

Utilize Xpath to transition between different html tags seamlessly

Here is the HTML snippet I am working with: <pre> <span class="cm-string">"userId"</span> ":" <span class="cm-string">"abc"</span> "," </pre> My goal is to extract the text "abc" from the "userId" tag, which changes fr ...

javahtmlseleniumxpathselenium-webdriver

Retrieve and manipulate the HTML content of a webpage that has been loaded into a

Hey, let's say I have a main.js file with the following code: $("#mirador").load("mirador.html"); This code loads the HTML content from mirador.html into index.html <div id="mirador"></div> I'm wondering if there is a way to chan ...

javascriptjqueryhtml

Unable to interpret data from the API

{ id: 8, customerName: "xyz", customerMobileNumber: "123456789", customerBillingAddress: "xyz address", customerShippingAddress: "xyz address", customerProductPurchasedDate: "2021-11-09T09:07:00.000Z", cust ...

javascripthtmlcssmysqlreactjs

What is the best way to position an element in the center of the screen

What is the best way to vertically center a button within a div? Click here for an image of the issue I recently started learning HTML & CSS and I am struggling to align a button in the vertical center of a div. Text-align:center doesn't seem to be ...

htmlcss

Unable to navigate between tabs in Bootstrap 5 navigation tabs

I am currently working on developing a login page that includes two tabs - one for logging in and another for registering. The login tab displays fields for username and password, while the register tab includes fields for name, last name, and email. I h ...

htmltwitter-bootstraptabsbootstrap-5login-page

Currently troubleshooting an issue with the CSS that is affecting the table header alignment

At first, I posed this Question and developed my own plugin to accomplish the task. However, I am encountering an unusual CSS issue with the table. Once I applied the plugin, the borders of table cells became disorganized. Here is a jsFiddle showcasing ...

javascriptjqueryhtmlcss

Troubleshooting the malfunctioning AngularJS ui-view component

My ui-view isn't functioning properly, but no errors are being displayed. Can anyone help me figure out what I'm missing to make this work? This is the main template, index.html. <!DOCTYPE html> <html> <head> <meta charset= ...

javascripthtmlangularjsangular-ui-routerangular-routing

Tips for wrapping and aligning elements in the center

On my website, I have a layout that displays 10 small images (around 100x200 pixels) evenly spaced at the bottom of the page. | | | The wide window la ...

htmlcss

The JavaScript and CSS properties are not functioning properly with the HTML text field

I came across this CodePen example by dsholmes and made some modifications: Here Furthermore, I have developed my own form on another CodePen pen: Link The issue I'm facing is related to the placeholders/labels not disappearing when typing in text f ...

javascriptjqueryhtmlcss

Django - issue with table display showing empty row due to query set

In my project, I have two models: one named Season and the other one named Game: # Season class Season(models.Model): teams = models.ManyToManyField('Team', related_name='season_teams', blank=True) current = models.BooleanF ...

pythonhtmlcssdjangosass