个人中心
gpt4 book ai didi

javascript - HTML 段落不会变成一条直线

转载 作者：行者123 更新时间：2023-11-29 17:49:09 27 4
gpt4 key购买 nike

我是编程新手，我无法解决这个问题。段落像楼梯一样出来。

    p
   p
  p
 p
p

p 是示例，但这里是我迄今为止完成的所有代码。请记住，我不是最擅长的 CSS(我还在学习)

我们将不胜感激

请告诉我如何解决这个问题，并告诉我我的代码中哪里出现了这个问题。

我试过谷歌但找不到任何东西......

var house = {}
function House() {
	var msg = 'This house is painted'
	var bath;
	var bed;
	var cook; 

	var Paint = document.getElementById('paint').value;
	var square = document.getElementById('Square').value;
	var bath = document.getElementById('bath').value;
	var bed = document.getElementById('Bed').value
	var cook = document.getElementById('Cook').value;
	//Get paragraphs to store values
	var paint = document.getElementById('isPaint');
	var squareFeet = document.getElementById('sq_Feet')
	var bathRoom = document.getElementById('bathroom')
	var bedRoom = document.getElementById('BedRoom')
	var kitchen = document.getElementById('kitchen');

	if(Paint == 'Yes' || Paint == 'yes') {
		house['isPainted'] = true;
		paint.innerHTML = msg;

	}
	else if(Paint == 'No' || Paint == 'no') {
		house['isPainted'] = false;
		var msg = 'this house is not painted'
	 	paint.innerHTML = msg;
	} 
	else if(Paint == '') {
		house['isPainted'] = undefined;
		var msg = 'no details given';
		paint.innerHTML = msg;
	} 
	if(square != '' ) {
		var squareFeetMsg = 'the house is';
		squareFeet.innerHTML = squareFeetMsg + ' ' + document.getElementById('Square').value + ' square feet';
		house['squareFeet'] = document.getElementById('Square').value
	}else {
		var squareFeetMsg = 'No Details Given';
		squareFeet.innerHTML = squareFeetMsg;
	}
}
body {
	width: auto;
	height: auto;
}
#houseDtails{
	width: 350px;;
}
#container {
	width: auto;
	height: auto;
}
.houseDetails {
	height: 0px;
	float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>House App</title>
	<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div id="conatainer">
	<div id="houseDtails">
			<label for="paint">Is this house painted: </label><br>
			<input type="text" id="paint" class="Detail" /><br>

			<label for="Square">How many SQ feet does this have? :</label>
			<input type="text" id="Square"><br>

			<label for="bath">How many bathrooms does your house have</label>
			<input type="text" id="bath"><br>

			<label for="Bed">How many bedrooms dos your house have</label>
			<input type="text" id="Bed"><br>

			<label for="Cook">Does your house have a kitchen</label>
			<input type="text" id="Cook"><br>

			<input type="submit" name="" id="sub" class="subm" onclick="House()">
	</div>
	<div id="addDetailsToPage">

		<p id="isPaint" class="houseDetails"></p>
		<p id="sq_Feet" class="houseDetails"></p>
		<p id="bathroom" class="houseDetails"></p>
		<p id="Bedroom" class="houseDetails"></p>
		<p id="Kitchen" class="houseDetails"></p>

	</div>
</div>
	<script src="House.js"></script>
</body>

最佳答案

以这种方式呈现段落的原因是 .houseDetails 上设置的 float 的结果。

.houseDetails {    height: 0;    float: right;}

关于javascript - HTML 段落不会变成一条直线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45824300/

27 4 0
文章推荐： javascript - 为什么 FireFox window.onbeforeunload() 仅在显示确认对话框时触发？
文章推荐： mysql - 使用 SQL 插值的 ScalikeJDBC 出现未知 SQL 语法错误
文章推荐： javascript - 具有外部托管 templateUrl 的 AngularJS 组件？
文章推荐： mysql - 使用 MySQL key 转置
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com