Question

复制代码并运行html文件。将JavaScript文件放在styles文件夹中的脚本文件夹和css文件中。

问题是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>

Answer 1

对于水平外观，在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;
}

同时从background-color:#999999;

的父div中删除ul

即使在应用溢出和换行之后，HTML列表也不会水平显示

1 个答案: