I'm facing an issue with the <label> element in my ASP.NET Core MVC project. Instead of displaying in a single line, it's splitting into multiple lines. Upon inspecting the element in Google Chrome, I noticed that it's inheriting styles from my custom.css class. Here's a snippet from my custom.css file:
body {
padding: 1em;
font-family: Arial, Arial, Helvetica, sans-serif;
}
h1{
margin-top:0;
color: navy;
}
label{
display: inline-block;
width = 50em;
padding-right: 1em;
}
div{
margin-bottom: 0.5em;
column-width = 300px;
}
When checking the CSS properties in the inspect element tool, I found this screenshot: https://i.sstatic.net/28Nif.jpg
I've tried updating and cleaning/rebuilding the custom.css file within the code base, but the changes are not reflecting on runtime. Removing the width property resolves the issue temporarily in the browser inspector, but it persists during actual execution:
https://i.sstatic.net/M7W7p.png
This perplexing behavior has me stumped. No matter how I adjust the custom.css file, the label continues to split across multiple lines. How can I rectify this unexpected rendering? For those curious about the full codebase, you can find it here.