Maintain a consistent fixed bottom border for single and double-digit numbers with CSS

Below is some example HTML code:

<div>
   <div class="fractop"><span>7</span></div>
   <div class="fracbottom">3</div>
</div>

<div>
   <div class="fractop"><span>4</span></div>
   <div class="fracbottom">5</div>
</div>

And here is some accompanying CSS code:

<style>
   .fractop{
       border-bottom:solid black 0px; 
       display:inline-block; 
       float:left;
       margin-top:20px; 
       text-align:center; 
       width:100%;
   }
   .fracbottom{ 
       display:inline-block;
       clear:left; 
       float:left; 
       width:100%; 
       text-align:center;
   }
   .fractop span{
       border-bottom:solid black 3px; 
    }

</style>

The task at hand is to ensure that the "divide by" line for fractions remains fixed for two digits, not adjusting dynamically in length.

Answer №1

Make sure to update your .fractop span with the following code snippet:

.fractop span{
   border-bottom: 3px solid black; 
   width: 17px;
   display: inline-block;
}

Answer №2

Although your current method may be a bit convoluted, here is a solution within that framework. Modify your CSS like this:

.fractop{border-bottom:solid black 0px; display:block; margin-top:20px; text-align:center; width:15px; margin:0; padding:0 3px;border-bottom:solid black 3px;}
.fracbottom{ display:block; margin-top:20px; text-align:center; width:15px; margin:0; padding:0 3px;}

Check out the fiddle here and feel free to make any adjustments

Answer №3

Hi there,

I wanted to share a demo with you on how to add an HR between two numbers and style it as a line. I have also included some inline styling in the parent div for additional help. If needed, you can easily transfer this styling to its own CSS class. Check out the demo by clicking on the following link: http://jsfiddle.net/rrp46faj/2/

<div style="width:20px !important;"><div class="fractop"><span>11</span></div>
    <hr>
<div class="fracbottom">2</div>
</div>

<div style="width:20px;"><div class="fractop"><span>5</span></div>
    <hr>
<div class="fracbottom">2</div>
</div>

Answer №4

Here is a tip for using the fraction symbol: &#8260

For example, you can display a fraction like this:

<div class="fractop">4.0000 &#8260; 5.3456</div>

If you want more information on HTML math codes, check out this link.

Additionally, you may find MathJax helpful for mathematical equations.

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

What is the best way to insert a new row into a table upon clicking a button with Javascript?

Hi everyone, I'm facing an issue with my code. Whenever I click on "Add Product", I want a new row with the same fields to be added. However, it's not working as expected when I run the code. Below is the HTML: <table class="table" id="conci ...

What are the steps to creating code that meets the high-quality standards of Themeforest

My plan is to sell bootstrap templates on the themeforest market but my first template got rejected. I believe the issue lies in the code structure and organization. Could you recommend any books or video courses that can help me write code that meets The ...

Using selenium to locate an SVG element

I'm currently working on automating the stock download process from the following website, starting with Turkiye Sigorta. Here is the URL (I have a subscription, hopefully you can access it): Upon inspecting the 'Excel'e Aktar' text, w ...

Guide on transferring an HTML template to a React component using props

I've created a React popup window component that accepts templates via props. Check out this example of how the popup is used: popup = ( <div> <Popup text='This is a popup' popupEl={ popupEl } /> < ...

How can I retrieve all the text from an HTML document following a particular tag?

I'm struggling with extracting text from an HTML file after the second occurrence of a specific tag. I've attempted using regex and bs4, but without success so far. The regex only captures the hit itself and not the rest of the html file. As for ...

posting data and redirecting fails when using an ajax button

I am encountering an issue where I click a button on a page to navigate to another page with posted data, but it is redirecting without posting anything. Both $_POST and $_SESSION variables are empty. Below is my ajax function: function ajax4(Div_Submit, ...

What steps can I take to hide my textarea after it has been clicked on?

Recently, I reached out for help on how to make my img clickable to display a textarea upon clicking. While I received the solution I needed, I now face a new challenge - figuring out how to make the textarea disappear when I click the img again. Each clic ...

Ways to handle <select> change events effectively in materialize css

My attempt at using a basic jquery change listener on a materialize css select dropdown has been unsuccessful. $("#somedropdown").change(function() { alert("Element Changed"); }); 1) Can anyone provide guidance on how to add a listener to ...

What is the best way to animate an element to move to another element and then return to its original position when clicked using JQuery?

Goal How can we implement a method to move item 3 to another container? If clicked again, how can we return the item to its previous position? This functionality needs to be applicable to all items. Javascript $('#item3').click(function(){ ...

Using the <mark> tag in CSS for creating padding

Struggling to utilize the padding feature in CSS effectively with the HTML below, as it only pads the first word on the left side: The current CSS code I have that's not working correctly: mark { background-color: #89ce40; color: white; opac ...

The container cannot contain the overflowing DIV

I have 4 different divisions named outer, inner, title, and content. My goal is to place the inner div inside the outer div, with both the title and content divs positioned within the inner div, one above the other. I have set the outer and inner divs to b ...

Show HTML element after scrolling 50 pixels on the page

I am looking to add a feature in my Angular application where a DOM element becomes visible as soon as the user scrolls down by 50 pixels. Is there a method or process available within Angular to achieve this effect? ...

Place the span in the upper right-hand corner within the MaterializeCSS Collection

I am facing an issue with positioning a span in a CollectionItem. I need it to be in the top right corner or aligned in the middle, but currently, it is staying in the bottom corner, and the problem seems to be with the first Item. Below is the code snipp ...

unable to choose the radio option

Encountering an unusual problem with the radio buttons due to custom styling. The issue arises when trying to select certain options. Here is the jsfiddle link for reference: http://jsfiddle.net/bm6Lfhdz/1/ Attempt to choose 'Yes' from the secon ...

How to effectively implement light and dark themes using SCSS colors?

Currently, I am utilizing Vue.js and SCSS along with PrimeVue and Element plus, where I am importing their variables. My objective is to dynamically change the theme color. In my dark-variables.scss file, I have defined various color variables for differe ...

Redirecting visitors to a specific section of the website as soon as they enter the site

Currently, I am utilizing a jquery plugin known as Ascensor which can be found at this link: This plugin is designed for creating one-page websites with smooth scrolling capabilities both vertically and horizontally. It operates using a coordinate system ...

Troubleshooting the dark mode toggle feature on WordPress after converting from Webflow: JavaScript unable to locate CSS variables

Having an issue with my WordPress site and custom JavaScript. The code is loaded into the site using this script tag on line 16 in the head-section: <script tr-color-vars="text,background,button-background,button-text,background-50,nav-menu-link,to ...

Can Selenium be used to validate resizing capabilities?

Looking to automate a test case focused on resizing a div element while ensuring that all content in the div remains unchanged, except for its size. Can Selenium help with this task? ...

Anomalous behavior of buttons in react-redux

Currently, I have a basic counter set up in react-redux as part of my learning process with these frameworks. My goal is to create a pair of number input fields that determine the payload for an increment/decrement action sequence. The intended outcome is ...

"Error message stating 'Unresolved variable' occurs in the code while trying to assign className={styles.nameOfClass

My current task involves adjusting the style of a button in ReactJS using the "className" property. However, I encountered an error message in WebStorm stating "Unresolved variable nameOfClass," and the desired style changes did not reflect when running we ...