HTML不能正确地放置元素怎么办?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (45)

所以,我对html很陌生,并试图用html和js来制作一个情节。但我似乎不能正确地放置元素。这是一段代码。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
        #figurecontainer {
            margin: 0px;
            width: 960px;
            height: 800px;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        .scatterlayer .trace:last-child path {
            pointer-events: all;
        }
    </style>

    <title>My Plotter</title>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
    <input style="float:left; width:20%; " type="file" id="input">
    <div style="float:left; width:20%;" id="status" ><p>Load Data to plot</p></div>
    <input style="display: none ; width: 100px" id="saveMe" type="button" value="SaveData">    
    <div >
        <p style="float: left; width: 100px">X column</p>
        <p >Y column</p>
    </div>
    <div> 
        <select  style="width:100px"  id="xcolumn">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
        </select>
        <select style="width:100px" id="ycolumn">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
        </select>
    </div>

    <div id="figurecontainer"></div>


    <script>
        // some js
    </script>

</body>

</html>

我希望第1行上有前三个元素,然后在第二行中使用“X列”和“Y列”,最后在第3行的两个下拉框中加上列名。我怎么能这么做?

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
        html {
            box-sizing: border-box;
        }
        body {
            float: left;
            width: 100%;
        }
        .row {
            float: left;
            width: 100%;
        }
        input[type=file] {
            display: inline-block;
            margin-right: 15px;
        }
        #status {
            display: inline-block;
            margin-right: 15px;
        }
        .saveMe {
            display: inline-block;
        }
    </style>

<title>My Plotter</title>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
    <div class="row">
        <input type="file" id="input">
        <div id="status" >Load Data to plot</div>
        <input id="saveMe" type="submit" value="SaveData">
    </div>
    <div class="row">
        <p style="float: left; width: 100px">X column</p>
        <p >Y column</p>
    </div>

<div class="row"> 
    <select  style="width:100px"  id="xcolumn">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
    </select>
    <select style="width:100px" id="ycolumn">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
    </select>
</div>

<div id="figurecontainer"></div>


<script>
var layout = {
    autosize: true,
    showlegend: false,
    margin: {
        t: 20,
        r: 10,
        b: 30,
        l: 30,
        pad: 0
    },
    xaxis: {
        range: [0, 8],
        fixedrange: false,
        layer: 'below traces'
    },
    yaxis: {
        range: [0, 51],
        fixedrange: false,
        layer: 'below traces'
    },
    font: {size: 16}
};

var breakpoints = {
    x: [1, 8],
    y: [5, 30],
    type: 'scatter',
    cliponaxis: false,
    mode: 'markers',
    marker: {
        size: 5,
        symbol: "circle-open-dot",
        color: '#b00',
        line: {
            width: 2
        }
    },
    hoverinfo: 'x+y'
};

var figurecontainer = document.getElementById("figurecontainer");
Plotly.plot(figurecontainer, [breakpoints], layout);
</script>

提问于
用户回答回答于

你的代码有一种混合类型的定位元素,这就是为什么你的网页结构不正确,但对于初学者来说,这是可以的。我稍微修改了你的代码,下面是最后的html:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
		html {
			box-sizing: border-box;
		}
		body {
			float: left;
			width: 100%;
		}
		.row {
			float: left;
			width: 100%;
		}
		input[type=file] {
			display: inline-block;
			margin-right: 15px;
		}
		#status {
			display: inline-block;
			margin-right: 15px;
		}
		.saveMe {
			display: inline-block;
		}
    </style>

    <title>My Plotter</title>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
	<div class="row">
		<input type="file" id="input">
		<div id="status" >Load Data to plot</div>
		<input id="saveMe" type="submit" value="SaveData">
	</div>
    <div class="row">
        <p style="float: left; width: 100px">X column</p>
        <p >Y column</p>
    </div>
	
    <div class="row"> 
        <select  style="width:100px"  id="xcolumn">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
        </select>
        <select style="width:100px" id="ycolumn">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
        </select>
    </div>

    <div id="figurecontainer"></div>


    <script>
        // some js
    </script>

</body>

</html>

扫码关注云+社区

领取腾讯云代金券