How can I make a header appear with both a horizontal line (hr) and a button on the same line like this:
Header ------------------------------------ Button
https://i.sstatic.net/cYT8W.png I attempted using display:flex, but the hr ended up as a vertical line.
.flex-header {
display: flex;
}<div class="flex-header">
<h2> Des habitations pour tous </h2>
<hr/>
<button> Collections </button>
</div>To achieve a line similar to <hr>, you can simply use a <div> with customized CSS properties:
.flex-header {
display: flex;
}
.line {
display: flex;
flex-grow: 1;
height: 1px;
align-self: center;
margin: 0 20px;
background-color: grey;
}<div class="flex-header">
<h2> Des habitations pour tous </h2>
<div class="line"></div>
<button> Collections </button>
</div>Modify the display property of the h2 element to "inline" instead of the default "block" in order to show the button next to the header.
h2{
diplay: inline;
}
To create a horizontal line, remove the display flex and adjust the hr property:
h2{
hr{
display: inline-block;
width: 50%;
}
}
Check out the project here: https://codepen.io/Luis4raujo/pen/mdOXdyB
If this solution helps you, please mark it as correct or give it a vote up!
To mimic a table layout, one approach is to use the following HTML and CSS code:
<div class="container">
<span class="cell1">Content in cell 1</span>
<div class="cell2"><hr></div>
<button class="cell3">BUTTON</button>
</div>
.container {
display: table;
}
.cell1, .cell2, .cell3 {
display: table-cell;
white-space: nowrap;
}
.cell2 {
width: 100%;
}
I'm encountering difficulties making direction-aware hover and css transitions function correctly. Specifically, I am attempting to create a grid of elements with front and back faces, and on hover, have a css transition that flips the element to disp ...
Encountered an issue when attempting to run my Express.js solution. Instead of opening my desired index.html file located in the client directory, it kept opening the index.jade file from the views folder with the message "Welcome to Express" on the browse ...
When the user clicks on item one button in the first tab, it should disable the next two tabs. If the user clicks it back, it should enable the other two tabs. The same functionality should apply to the other tabs as well. Currently, I have disabled the ...
I have a login page with a text field for email and password, styled using the Bootstrap framework. I want to change the border color of the input field from grey to red when it is empty and the user clicks the login button. I tried implementing the code t ...
Is there a way to make the bottom-most row (highlighted in yellow) expand downward to fill available space? Check out this link for reference: https://jsfiddle.net/darrengates/oucvnfke/ I initially thought using: flex: auto; would solve the issue. Whil ...
I am utilizing flask, html, js for building a web application. I am currently facing an issue where the template defined in the component <add-movie> within movies.js is not being rendered into add_movies.html. The add_movies.html extends base_admin ...
I am currently working on a registration form that only accepts alphabetical input. However, I am facing an issue where my error message appears regardless of whether I input an alphabetical or special character. According to my understanding, the code sho ...
So, I'm using JQuery Validator on my webform to validate form data. However, I haven't added any validation on the server side. I'm curious if it's possible for a user to modify the code and bypass my validations in their browser. If th ...
I'm struggling with implementing the ellipsis function on my website. My goal is to have the ellipsis appear at the end of each paragraph in the news_inner div (morgan, pia, and gold). I found the function on , but I'm having difficulty understan ...
Currently, I have a page in SharePoint that can function as a pop-up. I am using JavaScript to identify whether it is a pop-up by checking if window.location.search.match("[?&]IsDlg=1"). However, I am struggling to figure out how to insert CSS based on ...
I am facing a situation where I have two web pages named index and results. The results.html page contains some hidden divs with the CSS property set to display: none. My goal is to navigate from the index page using a navigation menu and open the results ...
Take a look at this URL. I have dynamically created divs in a nested structure for a sports tournament. I need help styling the divs to match the tournament structure. This is how I want my structure to look. The code is functioning properly, it's ju ...
MuiInput-formControl { margin-top: 16px; Is there a way to reset the marginTop property to zero? I attempted the following method, but it was not successful. MuiFormControlLabel: { marginTop: 0, }, <Autocomplete disabl ...
Currently, I am revamping an ASP Classic website. The entire site relies on a major CSS file named Main which houses all the styles used. In this file, there are not many styles as the current design is quite basic. Some elements on certain pages have thei ...
Check out my code snippet below: .circle { border: 1px solid transparent; border-radius: 50%; width: 100px; overflow: hidden; } .div7 { width: 100px; height: 10px; background: red; color: white; font-weight: bold; positi ...
Is there a way to stream a video recorded with ffmpeg in a web browser using the HTML5 video tag? I currently have this code on my page, with the URL pointing to a video file (example.mkv) being recorded by ffmpeg. <video class="video-player" controls ...
I am currently exploring different methods to create a specific layout using CSS only: https://i.sstatic.net/rcPih.png Essentially, I need the height of the "title" block to adjust according to the size of the image in the "logo" block and position this ...
While utilizing cdk-virtual-scroll-viewport within my mat-autocomplete, I have noticed that scrolling works perfectly when using the mouse but does not function properly when pressing the keydown button. Expected Behavior: The list should automatically sc ...
Seeking assistance with an issue in Bootstrap 4 related to responsive image height. Within a row containing four columns, the 2nd and 3rd columns occupy 5 columns each. The 2nd column contains an image while the 3rd column holds text. The challenge arises ...
I am working on a form that contains 45 dropdown lists and currently, I am using the following code for validation. Is there a way to modify this code so that I can use a single function to validate all 45 dropdown lists? Below is the Function: function ...