HTML中的列表即使在应用了溢出和换行后也不能水平显示

Lists in HTML not displaying horizontally even after applying overflow and wrap

本文关键字：换行 溢出 也不能 显示 水平 应用 列表 HTML      更新时间：2023-09-26

复制代码并运行html文件。把JavaScript文件放到scripts文件夹，css文件放到styles文件夹。

问题是li元素没有以应该的方式水平显示。

当您运行它并填写详细信息并添加学生信息时，它将显示在html页面中。没有刷新填充另一个细节。再一次，它显示了。一开始的2 checkboxes告诉我们视图的类型，这就是问题所在。我想让它水平显示。我不希望元素水平显示，一旦它越过ul元素区域，我希望它给一个水平滚动，而不是一个新的行。

var name;
var age;
var dob;
var id;
var street;
var city;
var id1;
//Variable declarations
function ver() {
  console.log("Vertical view");
  $("#displayDetails").removeClass("hor").addClass("ver");
}
function hor() {
  console.log("Horizontal View");
  $("#displayDetails").removeClass("ver").addClass("hor");
}
$(window).load(function() {
  // executes when complete page is fully loaded, including all frames, objects and images
  console.log("window is loaded");
});

$(document).ready(function() {
  // executes when HTML-Document is loaded and DOM is ready
  console.log("Inside document.ready(function())");
  $("button").click(function() {
    console.log("name fetched");
    name = $("#name").val();
    age = $("#age").val();
    dob = $("#dob").val();
    street = $("#street").val();
    city = $("#city").val();
    // alert(city + "id " +id + "stret " + street);
    console.log(age);
    //Validation Results
    var status;
    status = new Validate();
    var nameStat = true;
    if (!status.validateName(name)) {
      console.log("Name incorrect");
    } else if (!status.validateAge(age)) {
      console.log("age incorrect");
    } else {
      var a = new Student(name, age, dob, street, city);
    }

    $('input').val("");
  });
});
//Validation Methods
var Validate = function() {
  this.validateName = function(name) {
    //alert(name);
    if (name == "") {
      console.log("Name cannot be blank");
      return false;
    } else {
      return true;
    }
    /*else if(name == /[a-z]/)
    						{
    
    							console.log("Good name");					
    							return true;
    						}*/
  }
  this.validateAge = function(age) {
    console.log("validating age");
    if (age == "") {
      console.log("Age cannot be blank");
      $("#age").focus();
      return false;
    } else {
      return true;
    }
    /*else if(age==/[0-9]/)
    					{
    						console.log("Please enter a Valid age!");
    					}
    								else{return true;}*/
  }
}
this.validateCity = function(city) {
  if (city == "") {
    alert("City name cannot be blank");
    $("#city").focus();
    return false;
  } else {
    return true;
  }
}
this.validateStreet = function(street) {
  if (street == "") {
    alert("Street cannot be blank");
    $("#street").focus();
    return false;
  } else {
    console.log("Got Street");
    return true;
  }
}
this.validateDob = function(dob) {
  if (dob == "") {
    alert("DOB cannot be blank");
    $("#dob").focus();
    return false;
  } else {
    return true;
  }
}
var count = 0;
var Student = function(name, age, dob, addressId) {
  this.name = name;
  this.age = age;
  this.dob = dob;
  this.addressId = addressId;
  //alert("Street : " + addressId.street);
  ++count;
  $("#displayDetails").append("<li id=count><input type='checkbox' onclick='delete1()'>" + " <div>" +
    "Name: " + name +
    "<br/>Age: " + age +
    "<br/>Date of Birth: " + dob +
    "<br/>Street: " + street +
    "<br/>City: " + city
    + "</div>" + "</li>");
}
function delete1() {
  $("#count").remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="styles/hor.css">
</head>
<body>
  <b>Select View</b>
  Vertical
  <input value="vertical" type="radio" name="view" onclick="ver()" />Horizontal
  <input value="horizontal" type="radio" name="view" onclick="hor()" />
  <h2><i>Students Information Form</i></h2>
  <input type="text" placeholder="Enter Name" id="name" />
  <br/>
  <input type="text" placeholder="Enter Age" id="age" />
  <br/>
  <input type="text" placeholder="dd/mm/yyyy" id="dob" />
  <br/>
  <input type="text" id="street" placeholder="street" />
  <br/>
  <input type="text" id="city" placeholder="city" />
  <br/>
  <button>Register</button>
  <br/>
  <div style="background-color:#999999;" id="box">
    <ul id="displayDetails" class="hor ver"></ul>
  </div>
  <script src="scripts/script2.js"></script>
</body>
</html>

在CSS中

ul#displayDetails{
  list-style-type: none;
  display: inline-flex;
  overflow-x: auto;
  background-color: #999999;
  max-width: 300px;
}
ul#displayDetails li{
  padding-right:40px;
  min-width: 100px;
}

也从ul的父div中删除background-color:#999999;

相关文章：