Achieving proper HTML element order?

Here is the HTML page I am working with:

Click here to view the code on jsfiddle

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Extended UI</title>
<style type="text/css">

.header{
    padding-right:50px; 
}
.value{
    padding-left:50px; 
}

</style>
</head>

<body>
    <div id="wrapper">
    <div id="score"><span class="header">Score:</span><span class="value">10</span></div>
    <div id="dd-1"><span class="header">Has Account</span><span class="value"><select name="" id="">
                <option value="">Yes</option>
                <option value="">No</option>
            </select></span></div>
    <div id="dd-2"><span class="header">Has House</span><span class="value"><select name="" id="">
                <option value="">Yes</option>
                <option value="">No</option>
            </select></span></div>
    <div id="dd-3"><span class="header">Has Phone</span><span class="value"><select name="" id="">
                <option value="">Yes</option>
                <option value="">No</option>
            </select></span></div>
</div>

</body>

</html>

The values on my page are not displayed in the correct order. How can I rearrange them properly?

Thank you!

javascriptjqueryhtmlcss

Answer №1

To prevent the inline element from ignoring your padding adjustments, you need to set it as display:inline-block before specifying the width based on your design.

Fiddle Link: http://jsfiddle.net/HarishBoke/8HgHe/

Answer №2

Check out the live demonstration Live Demo

Below are the CSS modifications you need to make:

.header{
    padding-right: 50px;
    min-width: 120px;
    display: inline-block;
}
.value{
    padding-left:50px; 
    display: inline-block;
}

Answer №3

Have you considered utilizing a basic table for this?

<table>
    <tr>
        <td>Grade:</td>
        <td>A</td>
    </tr>
    <tr>
        <td>Has Membership:</td>
        <td>
            <select name="" id="">
                <option value="">Yes</option>
                <option value="">No</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>Owns Car:</td>
        <td>
            <select name="" id="">
                <option value="">Yes</option>
                <option value="">No</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>Has Laptop:</td>
        <td>
            <select name="" id="">
                <option value="">Yes</option>
                <option value="">No</option>
            </select>
        </td>
    </tr>
</table>

FIDDLE

Answer №4

If you're struggling to set width for inline elements, try using inline-block instead.

.header {
    display: inline-block;
    width: 150px;
}

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

Checkbox input with alphabetical ordering

I am currently facing an issue with a form that has checkboxes, but the text is not in alphabetical order. While there are plenty of examples for lists, finding examples for checkboxes has been challenging. http://jsfiddle.net/fG9qm/ <form> < ...

javascriptjqueryhtml

What is the process for changing the state of an array in graphql?

Currently, I am facing a challenge with adding an array to a GraphQl schema. Here is what it looks like: type Play { winRatio: [Float] } The intention behind the winRatio attribute is to store the history of all win ratios. For instance, after playing 3 ...

javascriptarraysreactjsgraphqlaws-amplify

Is there a way to handle error messages in JSON format when working with PHP?

**var ajaxUrl='admin/includes/validation.php?ref=enquiry&name='+$("#name").val() + '&email1='+$("#email1").val() + '&phone='+$("#phone").val()/*+ '&check='+a*/; $.ajax({ type: "POST", u ...

phpjqueryajaxjson

In Angular, the process of duplicating an array by value within a foreach function is not

I have been attempting to duplicate an array within another array and make modifications as needed. this.question?.labels.forEach((element) => { element["options"] = [...this.question?.options]; // I've tried json.stringify() as wel ...

javascriptarraysangulartypescriptdeep-copy

Using jQuery to extract values from a textbox in an .aspx page that utilizes a Master page

I need to retrieve the value of a text box control using its ID. function FetchTextValue(id) {var val = $('#<%=' + id + '.ClientID %>').val(); alert(val); } ...

jqueryasp.net

I attempted to create a test scenario to verify that the length of the tasks array is not negative. However, when trying to test this using 'not.toBe' in the code below, an error was encountered

app.js var todos=[]; todos=['to-do one', 'to-do two']; module.exports=todos; app.test.js const todos=require('./app') test('should have a length of at least 0',()=>{ expect(todos.length).toBeGreaterThanOrEqu ...

javascriptunit-testingjestjsts-jest

Transform the Curly Braces within a string into an HTML span Element using JSX

Looking to parameterize a string like 'Hello {name}, how are you?' in React Component? Want to replace curly braces with variable text and highlight it using span/strong tag. Here's an example of the desired final result: Hello <span cla ...

javascriptstringreactjsjsx

How can I transfer data from a text box to a combo box?

I am currently engaged in developing a web application that utilizes HTML, CSS, and PHP. However, I am interested in learning how to pass the value from a text box to a combo box. Below is the section of HTML code related to this query. Additionally, it ...

phphtml

Error: Trying to set a value to an undefined object in the bind() method

I am currently working on implementing a listener for my video player in order to update the input range on some custom controls. However, I have encountered an issue with an error message that states Uncaught ReferenceError: Invalid left-hand side in as ...

javascriptjquery

Graphic background integrated into form input

Is it advisable to create colored shapes in Illustrator, export them as SVG files, and then embed input tags or textareas within these shapes to allow users to enter text? Are there alternative methods we could use for this functionality? https://i.sstat ...

htmlcsssvg

Construct a structure containing the key/value pairs of cells within an HTML table row using JavaScript

I'm completely new to JavaScript so please be patient with me; I'm not even sure if I'm searching for the solution correctly. Despite spending hours googling and experimenting, I still can't get it to work. My issue is related to an HT ...

javascriptjqueryhtmlarrayshtml-table

Modifying Array Values in Angular 7

I am currently dealing with a complex array where questions and their corresponding answers are retrieved from a service. Upon receiving the array, I aim to set the 'IsChecked' attribute of the answers to false. The snippet of code I have written ...

javascriptangulartypescriptangular7

Validating emails using angular material chips

I'm currently working on implementing a form that utilizes input chips to facilitate sending messages to multiple email addresses. While I've made progress in making the form functional, I'm facing difficulties in displaying error messages w ...

htmlangulartypescriptformsvalidation

When utilizing AJAX within a for loop, the array position may not return the correct values, even though the closure effectively binds the scope of the current value position

Is this question a duplicate of [AJAX call in for loop won't return values to correct array positions? I am following the solution by Plynx. The issue I'm facing is that the closure fails to iterate through all elements in the loop, although the ...

javascriptjqueryajaxloopsclosures

Can HTML5 be used to store IDs in PHP chat applications?

I'm in the process of developing a chat application with PHP. Everything is functioning properly, but I have encountered a potential loophole. I am implementing AJAX to fetch chat data as the user scrolls, similar to platforms like Facebook and Twitte ...

javascriptphpjqueryhtmlchat

`Need help testing flow.js file uploads using Selenium?`

My AngularJS SPA allows users to upload files using the ng-flow wrapper for flow.js. I am currently in the process of setting up automated e2e tests with Selenium, but I am facing challenges when it comes to testing the file uploading mechanism triggered b ...

javascriptangularjsseleniumtestingflow-js

Is it possible to rearrange an array by moving an element to the front

If I have an array as shown below, how can I move key [2] and its corresponding value to the front of the array? This would make it key [0] and increment the other keys by 1. Current: [0] => Array ( [name] => Vanilla Coke cans 355ml x 2 ...

phphtmlarrays

JavaScript utilized to create a fully immersive full-screen webpage

I have been trying to implement a code for creating a full-screen website that works on all browsers. Unfortunately, my current code only seems to be functioning properly on Mozilla browser. When I try to view the site in Chrome and make it full screen, it ...

javascriptjqueryfullscreen

Frequent execution of jQuery Ajax requests is evident

Using a live operator, I attach a click function to a li-element: $(".UListView li input.iconbutton.click").live("click", function(e){ e.preventDefault(); [...] $.get("ajax/categorylist.php?appendcategories=true&parentcat="+currentid+"&side="+sid ...

jqueryajaxlive

Creating distinct web addresses for various sections of vue.js pagination

I've implemented pagination using vue.js for my website's gallery. However, I'm facing an issue where the URL doesn't change when navigating through pages and upon page refresh, it always resets to page 1. My goal is to have the URL ref ...

javascripthtmlvue.jspagination