Question

我有5个按钮，这些按钮在一条线上编码。这允许我将它们彼此相邻挤压，两者之间没有任何空格，这就是我想要的。

但是，如果我将每个按钮的代码向下移动一行，则按钮之间会有空格，这是我不想要的。

以下是2个按钮的示例代码：

<button id="home" type="button">Home</button><button id="save" type="button">Save
</button><button id="create" type="button">Create</button>

由于

Answer 1

您可以将换行符添加到代码中：

<button>btn1</button
><button>btn2</button
><button>btn3</button>

您可以注释掉标签之间的空格，就好像空间不在那里一样。

<button id="home" type="button">Home</button><!--
--><button id="save" type="button">Save</button><!--
--><button id="create" type="button">Create</button>

对于CSS，CSS允许您同时定义多个类/ ids / etc的属性。

#save, #home {
    margin-top: 20px;
    height: 40px;
    width: 240px;
}
#home { margin-left: 40px; }

Answer 2

您可以使用＆＃34;类＆＃34; input元素的属性，用于定义影响所有获取类的按钮的样式选项。让我告诉你：

<button id="home" type="button" class="btn-style">Home</button>
<button id="save" type="button" class="btn-style">Save</button>
<button id="create" type="button" class="btn-style">Create</button>

在你的CSS中，你有自己的风格：

.btn-style{
//your css here
}

要在按钮之间没有空格，只需使用CSS样式。但为此，请在谷歌搜索。您可能需要样式属性，如＆＃34;显示，边距，浮动...＆＃34;。

格尔茨

Answer 3

嗯，HTML做到这一点非常恼人，但我解决它的方式如下：

<button>btn1</button
><button>btn2</button
><button>btn3</button
><button>btn4</button
><button>btn5</button>

或者正如其他用户也建议的那样，您可以在其间插入注释：

<button>btn1</button><!--
--><button>btn2</button><!--
--><button>btn3</button><!--
--><button>btn4</button><!--
--><button>btn5</button>

Answer 4

使用类创建按钮：

<button class="button" id="save">Save</button>
<button class="button" id="new">New</button>
<button class="button" id="load">Load</button>

在CSS文件中创建一个类：

.button {
    display: block;
    float: left;
    width: 100px; /*For example*/
}

这将使您的按钮粘在一起，没有空格，HTML将更具可读性。

编辑：当您使用ID时，请在CSS类中添加该ID，并使用margin-left。

/* in this example, the button to the mostleft is #save, so...*/
#save {
    margin-left: 10px;
}

以下是demo

Answer 5

对于<button>等内联元素之间的空格问题，请尝试编写类似的代码：

<button id="home" type="button">Home</button><!--
--><button id="save" type="button">Save</button><!--
--><button id="create" type="button">Create</button>

Answer 6

通过button选择器应用常见的css以及 ID

的任何特定样式

button{
    margin-top: 20px;
    height: 40px;
    width: 240px;
}
#home{
    margin-left: 40px;
}
#save{

}

如何使HTML代码更具可读性？

6 个答案: