Do I need to divide everything into divs in order to create a table like the picture I made below?
Do I need to divide everything into divs in order to create a table like the picture I made below?
Here is the code snippet you need:
<div style="font-size: 25px">
Contant Information</div>
<div style="border-bottom: 1px black dashed;width:55%">
</div>
<ul style="padding-left: 0px">
<div style="margin-top: 4px; display: inline-block">
First Name</div>
<div style="display: inline-block; margin-left: 200px">
Last Name</div>
<div style="display: inline-block; margin-left: 200px">
Phone Number</div>
<br><input><input style="margin-left: 113px"><input style="margin-left: 113px"></ul>
<div style="border-bottom: 1px black dashed; margin-top: 5px;width:55%">
</div>
<ul style="font-size: 20px">
Desired Vehicle</ul>
<div style="border-bottom: 1px black dashed; margin-top: 5px;width:55%">
</div>
<ul style="padding-left: 0px">
<div style="margin-top: 4px; display: inline-block">
Year</div>
<div style="display: inline-block; margin-left: 238px">
Make</div>
<div style="display: inline-block; margin-left: 230px">
Model</div>
<div style="display: inline-block; margin-left: 225px">
Price Range</div>
<br><input><input style="margin-left: 113px"><input style="margin-left: 113px"><input style="margin-left: 113px"></ul>
<div style="border-bottom: 1px black dashed; margin-top: 5px;width:55%">
</div>
<ul style="padding-left: 0px; font-size: 17px">
<div>
List any other features you would like the vehicle to include</div>
<textarea style="width: 600px; height: 120px"></textarea></ul>
Utilize this structure and ensure to properly clear any floated elements.
<div class="contact">
<ul>
<li><label>First Name</label><input type="text" /></li>
<li><label>Last Name</label><input type="text" /></li>
... and so on ...
</ul>
</div>
CSS:
.contact li {
float:left;
margin-right:10px;
}
label {
display:block
}
To achieve the desired width for your elements, simply place them in a containing div with the width you want. There's no need to put each row in its own div. For rows with multiple input elements, create divs and set the input elements to display:inline-block; This will allow them to line up horizontally within the containing div if there is enough space, while still being able to set their own widths like block-level elements. Adding top and bottom borders to these divs can help create the dividing lines shown in the image you provided.
If you find that making inputs behave like block elements is challenging, you can explore an alternative method using the CSS3 box-sizing property to style them. Check out this resource for more information: .
I'm currently developing a spring boot REST API that only exposes the backend logic. One of the functionalities we have is the forgot password feature, which requires sending an email to the user. To achieve this, I have implemented the thymeleaf temp ...
Currently, I am working on creating a form that allows users to build quizzes without any restrictions on the number of questions they must include. To achieve this, I plan to add an "add question" button at the bottom of the quiz form, allowing users to d ...
Is it possible for child divs to adjust their height automatically based on a percentage within a parent div with set max dimensions using CSS? HTML: <div id="parent"> <div id="top"></div> <div id="bottom"></div> < ...
Is it possible to activate multiple music notes when hovering over one? For example, if I hover over music note 2, both note 1 and note 2 should get active classes. And if I hover over note 3, then all three spans/icons should become active. I have succes ...
Currently, I'm focusing on a specific script : http://www.andwecode.com/playground-demo/pop-up-login-signup-box-jquery/# I've made some adjustments to the Gmail and Facebook boxes within this script. When clicking on them, I want them to displa ...
Can the font size be smoothly scaled in relation to the width of the body or parent element? I am seeking a solution that does not involve javascript. Is it feasible to relate rem to a specific width? ...
Is there a way to make the child div scroll until the end before allowing the page to continue scrolling when the user scrolls on the parent div? I attempted to use reverse logic Scrolling in child div ( fixed ) should scroll parent div Unfortunately, it ...
Currently, I am working with ReactJS and ANTD. My modal has been adjusted with paddings to center-align the text, but now I want to enhance the design. Here is the desired look: https://i.stack.imgur.com/qef7n.png This is how it appears at the moment: htt ...
I am encountering an issue with the Grid component in material-ui. The grid items are currently stacking below each other instead of beside each other, and I'm unsure of what is causing this behavior. My intention is for the grid items to stack on top ...
Having a flexbox container with multiple items in row-wrap format, is there a way to use JavaScript to determine the number of items in each row? Essentially, finding out at what point they wrap. For instance- <div class="container"> <div clas ...
Looking for assistance with a technical issue I'm facing... I am currently working with AngularJS and have integrated jQuery into my project. However, I've encountered an issue where the jQuery code is not functioning as expected on the HTML pag ...
I found inspiration for my project from the following source: https://codepen.io/plavookac/pen/qomrMw One challenge I'm facing is changing the opacity of the movement, which is not covered by the standard transition markers. .mainInner{ display ...
I'm struggling to get my code to work properly. I've tried adjusting some parts to be more specific and others more general, but it's not functioning as expected. Please review my code and any advice or assistance would be greatly appreciat ...
After diving into the world of automation with Selenium in C#, I find myself faced with a challenge. I need to automate clicking on a specific radio button on a website based on the text of the associated label. What makes it even more interesting is that ...
Following the method provided in Bootstrap documentation, I included the following code: <div class="container"> <a class="navbar-brand" href="#"> <img src="/img/hangers.jpg" alt= ...
I'm currently in the process of scraping a javascript-based webpage. After reading through some discussions, I was able to come up with the following code snippet: from bs4 import BeautifulSoup import requests website_url = requests.get('https:// ...
Currently, I'm attempting to apply a background image to a webpage that spans 100% width in order to adjust to the viewport size. The method I am using involves placing an image directly after the body tag with the subsequent styling: img#background ...
Retrieving information from a MySQL database, the stored data appears as follows: <p><script>alert('123');</script><br /></p> Upon fetching the data in its raw form, it displays like this: <script ...
Our designer has a vision for this: However, I'm struggling to find a suitable method for creating the triangle crop effect: Implementing an :after element that spans the entire width and utilizes border tricks to form a triangle shape Creating a l ...
I am looking to change the background color of a button that I have clicked on in my code. Do I need to use loops and conditions for this task? I attempted to access the first index, but I am unsure how to change the background color of other buttons. l ...