Tips for creating a gap between the <label> element and a form field

I have read through the answers provided, but nothing seems to work for me. My goal is to place a label and 2 small form fields on the same line, with about 90px of space between the label and the fields. I am aiming for a layout similar to the image shown below.

https://i.sstatic.net/mrCir.png

I am facing difficulties in aligning the label "Monday" with the 2 field forms on the same line. Even when I manage to achieve this, one of the form fields ends up dropping to the next line. It's frustrating trying to figure out something that should be simple.

Currently, my setup looks like this:

https://i.sstatic.net/4KBsU.png

Please assist!

div.form-group{
    width:100%;
    float:left;
    width: 100%;
    margin-left: 450px;
    margin-top: -340px;
    z-index:-2;
}

div.form-group > label,[type=text]{
    float:left;
   
}

div.form-group > label{
    width:100px;
    text-align: left;
    padding-left: -10px;
    margin-right: 40px;
    z-index:9;
}

div.form-group[type=text]{
    margin-left: 50px;
    z-index: 1
}
<div class="form-group">
    <label for="Monds"> Monday </label>
    <input type="text" name="Monds" id="Mon"  class="open_hours" placeholder="--:--" required tabindex="8">
    <input type="text" name="Monds" id="Monday" class="open_hours" placeholder="--:--" required tabindex="9">
    <div>

htmlcssformslabel

Answer №1

Did you find what you were seeking in this link?

Here is the HTML code snippet:

<div id='firstColumn'>
    <label for='frName'>Franchise Name</label>
    <input type="text" name="frName" id="frName" placeholder="Enter franchise name" required tabindex="1"/>
    <br />
    <label for='name'>Your Name</label>
    <input type="text" name="name" id="name" placeholder="Joe Blogs" required tabindex="2"/>
    <br />
    <label for='address'>Address</label>
    <input type="text" name="addressNo" id="addressNo" placeholder="No" required tabindex="3"/>
    <input type="text" name="addressStreet" id="addressStreet" placeholder="Street" required tabindex="4"/>
    <input type="text" name="addressTown" id="addressTown" placeholder="Town / City" required tabindex="5"/>
    <input type="text" name="addressZIP" id="addressZIP" placeholder="ZIP Code" required tabindex="6"/>
    <br />
    <label for='phone'>Phone Number</label>
    <input type="text" name="phone" id="phone" placeholder="Enter your phone number" required tabindex="7"/>
    <br />
    <input type='submit' />
  </div>
  <div id='secondColumn'>
    <p>Opening Hours</p>
    <div>
      <label for="Monds"> Monday </label>
      <input type="text" name="Monds" id="Mon" class="open_hours" value='00:00' required tabindex="8">
      <span>-</span>
      <input type="text" name="Monds" id="Monday" class="open_hours" value='00:00' required tabindex="9">
      <hr />
    </div>
    ... (omitted for brevity)
  </div>

And here is the corresponding CSS code snippet:

#firstColumn label,
#secondColumn p {
  color: red;   
}

#firstColumn {
  width: 50%;
  float:left;
}
... (omitted for brevity)

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

The CSS child selector seems to be malfunctioning as it is affecting all descendants of the specified type

Struggling with creating a menu containing nested lists. Attempted using a child selector (#menu-novo li:hover > ul) to display only immediate descendants, but all are still showing. Any suggestions or solutions for this issue? #menu-novo-container { ...

htmlcssdrop-down-menu

Escape from an iframe with the help of a buster

My website is being targeted by a code that prevents it from breaking out of an iframe. Despite trying different frame breaker scripts, I have not been successful in resolving this issue. Any assistance would be greatly appreciated. Thanks! Buster: func ...

javascripthtmliframe

Converting an HTML div to a string for export

In the process of developing my application, I am utilizing an angular widget to construct a dynamic dashboard. Here is the snippet of HTML code along with the associated JavaScript that enables this functionality: <div class="page" gridster="gridsterO ...

javascriptangularjshtml

Ways to implement pointer event styling within a span element

Hi, I'm having trouble with styling and I can't seem to figure out how to resolve it. The style pointer-events: none doesn't seem to be working for me. Here is an example of my code: The style snippet: .noclick { cursor: default; ...

javascripthtmlcssangular

Styling React components using class names

Struggling with implementing a sidebar feature using the guidance provided in this example. However, I am facing difficulty in applying the necessary styles to each className... Here's what I've attempted so far, but unfortunately, no styles see ...

cssreactjs

Creating a full-width menu with Material UI - a step-by-step guide

I am currently working on creating a mobile menu that spans the full width of the screen. Despite my efforts, it seems like I might be misunderstanding something as my CSS rules are not being applied correctly. Here is a live code example for reference: ...

cssreactjsmaterial-ui

Retrieve the identifier of the higher-order block when it is clicked

When I have a parent block with a nested child block inside of it, I expect to retrieve the id of the parent when clicked. However, the event target seems to be the child element instead. Is there a way for JavaScript to recognize the parent as the event ...

javascripthtmleventsonclick

Utilizing jQuery to correspond with CSS media queries

Continuing from my previous question about an automatic jQuery image slider, you can refer to it here. I have made some changes in my CSS using media queries and I am trying to incorporate them into my JavaScript code using an 'if / else if' sta ...

javascriptjqueryhtmlcss

The conditional rendering logic in the ng-if directive does not seem to be synchronizing

Currently, I am delving into AngularJS and working on a basic application to gain familiarity with it. Within my app, there are four tabs: List, Create, Update, and Delete. However, my goal is to only display the Update and Delete tabs when I press the b ...

javascripthtmlangularjs

execute php sql after a certain delay

Currently, I am working with PHP, SQL, and JavaScript to develop a friend request system. In this system, if User-1 sends a friend request to User-2, User-2 must accept the request within 1 hour. If not, the request will be automatically denied or removed. ...

javascriptphphtmlsqlsettimeout

What is the best way to make HTML adjust to SVG scaling?

After applying a scale transform to an SVG, I noticed that the surrounding HTML does not adjust its size accordingly. Here is the SVG in question: <div> <svg height="300" width="300" viewbox="0 0 300 300" transform="scale(1.55)" xmlns= ...

htmlsvgscale

Is there a way to undo the CSS rotate animation that has been applied?

Struggling with reversing a CSS animation based on a class being added to a DOM node? Take a look at the code I've been using: EXAMPLE // Closed state @-moz-keyframes spin-close { 100% { -moz-transform: rotate(-0deg); } } @-webkit-keyfra ...

csscss-animations

Struggling to populate a fresh JavaScript array with values submitted from a form

I am currently working on a form to collect Family information that will be used for enrolling in a new benefit plan. My goal is to populate an array with the necessary values for each individual to create the benefit record. While researching, I have only ...

javascriptarraysformscreationpopulation

What is the best way to animate the scaling of a CSS property using jQuery?

I need help creating an animation where a circle div with the class of "bubble" grows from nothing to its full size when a button is clicked using jQuery. I am currently facing difficulties in making it work properly. Here's my current code snippet: ...

javascriptjqueryhtmlcssjquery-animate

Ensuring the footer stays at the bottom of the page using Tailwindcss and ReactJS

I've read numerous articles and posts about achieving this, but none of the methods seem to be effective for me. My goal is to have the footer stick to the bottom of the page when viewed on mobile devices. It displays correctly on larger screens, but ...

cssreactjstailwind-css

Integrate a new Webview Window into an existing iOS App to display locally stored HTML content

Integrate a WebView Window into an existing iOS application to display locally stored HTML content. I have already completed the feed RSS feature in my app, but now there is a requirement for a section that can be easily updated... ...

htmliosuiwebviewwebviewlocal

Error alert: The $ symbol is not defined

I followed a tutorial to create an auto-advancing slideshow in JavaScript/jQuery and it worked perfectly on jsfiddle. However, when I transferred everything to Dreamweaver, it stopped functioning. I have triple-checked that all the necessary files are link ...

javascriptjqueryhtmlcssslideshow

Content in tab remains stagnant

I am having trouble creating different tabs on a page with unique content in each tab's body. Whenever I click on a new tab, the body content remains the same. I'm not sure if it's an issue with how the tabs are set up in the HTML or if ther ...

javascripthtmlcsstabs

What is the best way to send an object to Vue Component?

How can I properly call a Vue Component with a data object? The todo-item tag works as expected, but the todo-item2 tag does not produce any output. I was expecting the same result. Here is the HTML code: <div id="app"> <todo-item v-bind:te ...

javascripthtmlvue.js

Python makes sure that HTML values remain constant even after a button is clicked by Selenium

I am currently utilizing Soup and Selenium to access a particular page . My objective is to extract a comprehensive list of pricing and ratings for different types of packaging available on this webpage. https://i.sstatic.net/3gbJ7.png Displayed below is ...

pythonhtmlseleniumweb-scrapingbeautifulsoup