Question

好吧，我有一个input框和一个submit button。这些应该是排成一列的，当button没有造型时，它们就是。但是，当我添加样式（如更改高度等）时，它们会变得像2px一样（我的意思是button顶部的空间比2px低input display框的顶部。 Check it out here.正如您在照片中看到的那样，它就像是最微小的部分。但是，如果我尝试将我知道的内容排成一行（例如line-height和button），它就不会执行任何操作/ body { background-image: linear-gradient(-42deg, #31E7F2 0%, #4ED57B 100%); font: 12px arial; text-align: center; padding: 35px; font-family: 'Muli', sans-serif; } form, p, span { margin: 0; padding: 0; font-size: 16px; font-family: 'Muli', sans-serif; } input[type = "text"] { font-size: 18px; font-family: 'Muli', sans-serif; padding-left: 6px; padding-right: 6px; width: 400px; height: 35px; display: inline-block; } input[type = "submit"] { background: #42EF73; display: inline-block; line-height: 35px; height: 35px; border: none; width: 70px; } input[type = "submit"]:focus { outline: none; } a { font-family: 'Muli', sans-serif; font-size: 18px; color: #0000FF; text-decoration: none; } a:hover { text-decoration:underline; } #wrapper, #loginform { margin: 0 auto; padding-bottom: 25px; background: #EBF4FB; width: 504px; border: 1px solid #ACD8F0; } #loginform { padding-top: 18px; } #loginform p { margin: 5px; } #chatbox { text-align: left; margin: 0 auto; margin-bottom: 25px; padding: 10px; background: #fff; height: 270px; width: 430px; border: 1px solid #ACD8F0; overflow: auto; } #logInButton { color: cyan; cursor: pointer; } #usermsg { width: 395px; border: 1px solid #ACD8F0; } #submit { width: 60px; } .error { color: #ff0000; } #menu { padding: 12.5px 25px 12.5px 25px; } .welcome { float: left; } .logout { float: right; } .msgln { margin: 0 0 2px 0; } #leaveMessage { display: none; }中的文字会更改它＆＃39的位置也是。

有什么想法吗？这是代码：

＆＃13;

<!DOCTYPE>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>CyanCoding Chat</title>
        <link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="index.css" />
    </head>
    <body>
        <div id="wrapper">
            <div id="menu">
                <p class="welcome">Welcome back!</p>
                <p class="logout"><a id="exit" href="#">Exit Chat</a></p>
                <div style="clear:both"></div>
            </div>    
            <div id="chatbox"></div>
             
            <form name="message" action="">
                <input name="usermsg" type="text" id="usermsg"/>
                <input name="submitmsg" type="submit"  id="submitmsg" value="Send" />
            </form>
        </div>
    </body>
</html>

＆＃13;

d3.csv("cities.csv",(error, data) => {dataViz(data)});
function dataViz(incomingData) {
var maxPopulation = d3.max(incomingData, d => parseInt(d.population))
var yScale = d3.scaleLinear().domain([0,maxPopulation]).range([0,460]);
d3.select("svg").attr("style","height: 480px; width: 600px;");

d3.select("svg")
.selectAll("rect")
.data(incomingData)
.enter()
.append("rect")
.attr("width", 50)
.attr("height", d => yScale(parseInt(d.population)))
.attr("x", (d,i) => i * 60)
.attr("y", d => 480 - yScale(parseInt(d.population)))
.style("fill", "#FE9922")
.style("stroke", "#9A8B7A")
.style("stroke-width", "1px")

＆＃13;

Answer 1

可能不是您正在寻找的修复程序（我不确定导致问题的原因）但是当我运行您的代码段时，以下更改甚至会在我的浏览器中更改：

/* Your code */
input[type = "text"] { 
    /*Your code*/
    box-sizing: border-box; // Add this line
}

input[type = "submit"] {
    /*Your code*/
    line-height: 37px; // Edit this line
}

Answer 2

您的元素具有各种特定高度和线高，这就是导致对齐不匹配的原因。例如，尝试为该提交按钮添加font-size，您就会看到高度现在发生变化，对齐也是如此。

尝试删除多余规则，然后使用flexbox对齐这两个元素。

排队的元素只有几个像素

2 个答案: