Can you take a look at my screenshot? Even after I set the width, the span width remains "auto."
https://i.sstatic.net/YQZwO.png
Check out the code snippet below:
<div class="container">
<div class="row"><span style="width:60px;background-color: red;">prefix1</span><span>prpr</span>
</div>
<div class="row"><span style="width:60px;background-color: red;">pre2</span><span>prpr</span>
</div>
</div>Make sure to set the display property of the spans to inline-block, as shown below:
.container span {
display: inline-block;
}<div class="container">
<div class="row"><span style="width:60px;background-color: red;">prefix1</span><span>prpr</span>
</div>
<div class="row"><span style="width:60px;background-color: red;">pre2</span><span>prpr</span>
</div>
</div>An important thing to remember is that an inline element only occupies the space within the tags that define the inline element (MDN).
Simply insert
<div class="wrapper">
<div class="row" style="width:auto;background-color: blue;"><span>text1</span><span>text2</span></div>
<div class="row" style="width:auto;background-color: blue;"><span>text3</span><span>text4</span></div>
</div>
It has been a while since I last delved into coding, so I appreciate your patience... I have an application that generates the following non-standard kml file: <?xml version="1.0" encoding="UTF-8"?> <kml xmlns="http://www.opengis.net/kml/2.2"> ...
Is there a tool similar to Firebug that is compatible with Internet Explorer? Edit I am currently using IE8, so I need a solution that works specifically with IE8. ...
Currently, I am working on creating a framework that involves determining whether a web element is hidden before executing any actions on it. One specific scenario involves a password field that is structured like so: <div class=hidepassword> < ...
I am new to PHP and I am using Wordpress to build websites. Currently, I am trying to develop my own themes for Wordpress. However, I am facing an issue with loading the CSS and JavaScript files. Can someone assist me in resolving this problem? header.php ...
I've encountered an issue where the CDNs (Bootstrap and FontAwesome) do not work when I embed my HTML source code into an email. Despite using inline styling throughout, the receiver still faces this problem. Any insights on why the CDNs are failing t ...
I've been searching everywhere for a solution to this problem. My goal is to design a page with a video player on the left side and a chat on the right side. I am using the embed-responsive class for the video player so that it adjusts its size based ...
Attempting to demonstrate databinding in a code snippet, but it keeps evaluating within the pre tag! Even when using { and }, it still evaluates. It's almost comical how such a simple issue is proving difficult to find an answer for online. ...
My attempt to center my title "Scream" is not working as expected. Here is how it looks: Visit this link for visualization. I have tried using justify, align, and text-align properties in my CSS code but the title (titulo) remains misaligned. Surprisingly ...
While working on my website, I noticed a peculiar white space appearing at the bottom of the page, but only when using Internet Explorer. Safari looks fine. I am currently using IE8. I would like the white background to end after the black navigation link ...
Let me illustrate my issue with an example. Consider the following table: <table> <tr> <th>First</th><th>Second</th><th>Third</th> </tr> <tr> <td>A</td><t ...
My JSON data for the other_prize is as follows: [{"prizeno":2,"prizedesc":"Rs :100,000/-","totalamt":100000,"conslation":"f","prizeticket":[{"seriesname":"RJ","digit":443581,"district":"THRISSUR"},{"seriesname":"RK","digit":633225,"district":"THIRUVAN ...
There seems to be an issue with displaying text in the data-tooltip. Instead of showing the intended message, it is displaying [Object object]. import React from "react"; import { FormattedMessage } from "react-intl"; const translate = (id, value={}) = ...
My Angular app has a peculiar issue. In one component, my HTML includes a selector of another component within a div like this: <div id="header"> <selector> Text Content </selector> </div> When I try to clone this d ...
I am facing a small issue with my CSS3/jQuery analog clock. Currently, the movement of the clock hands is a bit abrupt. I would like the animation to be smooth. I attempted using transition: all .1s, but it gets messy when the clock hands reach the top po ...
As a newcomer to javascript and jquery, I am experimenting with adding html through a javascript function. In an attempt to place the contents of variable "y" at a specific location, I am using a div tag with the id of "Contacts" and trying to append elem ...
Whenever I try to click the button labeled test, it doesn't do anything. However, an error message appears in the console debug indicating: Error: Unable to locate variable '$'. I suspect this might be a jQuery issue, even though I' ...
Can CSS be used to visually indicate when a line is wrapped? For instance, consider the following code inside a "pre" block: <html><body>Hello World</body></html> I have set white-space to pre-wrap to prevent horizontal scrolling ...
I am currently working on passing the value of a droplist to a get action. The submit button redirects to the correct action, but I am unsure of the correct method to include the droplist value with the redirection. This is my view: @model TrackerModel ...
Struggling with table cell paddings in Chrome because it appears that if a table cell doesn't have pure text, the padding isn't applied. Here's my code: <table> <tr> <th></th> <th ...
Is there a way to create 3D text effects with perspective using a combination of Javascript and CSS? I am open to suggestions that involve the use of external libraries for Javascript or CSS as well. ...