Question

我的行包含两个元素，我希望通过第二个元素对齐它们（它们是输入框，并且让它们全部垂直排列很不错）。当元素适合一行时，我的行为完全符合我的要求，我不想使用第一个元素的宽度来设置水平位置。这开始在小窗口或移动设备上变得怪异（当标签的宽度超过屏幕的45％时，它再次开始包装）。

获得相同结果的正确方法是什么？

FIDDLE

HTML：

var http = require("http"); 
http.createServer(function (request, response) {
    response.writeHead(200, {'Content-Type': 'application/json'});

    var net = require('net');
    var client = new net.Socket();

    client.connect(3344,'192.168.1.4',function(){
        ......
    }

    client.on('data', function(result){
        ......
        response.write(result);
        //response.write({"data":result});
        ......
        response.end();
    });

    client.on('error', function(ex) {
        var error = "error code: "+ex.code;
        response.write(error);
        //response.write({"error code":ex.code});
        response.end();
    }
});

CSS：

<label>Test</label>
<input type="number" value="0">
<br />
<label>Test longer</label>
<input type="number" value="0">
<br />
<label>Test longest text</label>
<input type="number" value="0">
<br />

Answer 1

您可以使用flex属性显示行和列，然后移除float

<div class="flex">
    <label>Test</label>
    <input type="number" value="0">
</div>
<div class="flex">
    <label>Test longer</label>
    <input type="number" value="0">
</div>
<div class="flex">
    <label>Test longest text</label>
    <input type="number" value="0">
</div>

在css中

.flex {
    display:flex;
}

label {
    width: 45%;
    text-align: right;
    padding: 2px;
    margin: 2px;
}
input {
    width: 200px;
    padding: 2px;
    margin: 2px;
}

@media(max-width:200px){
    .flex{
        display:block;
    }
}

并将媒体查询用于200px以下的屏幕（或您的偏好），以使文字和输入垂直显示

用二次元素对齐两个元素行

1 个答案: