Question

我有以下页面：

HTML：

CSS：

<div class=main>
    <div class=bttn>
        <button>abcdef</div>
    <div class=content>
        <a href=#!>jksg</a>
        <a href=#!>jksg</a>
        <a href=#!>jksg</a>
        <a href=#!>jksg</a>
    </div>
</div>

<button>abcdef
    <button>abcdef
        <button>abcdef
            </div>

当您运行代码时，第一个按钮单独出现在该行上，而其余按钮则排列在下一行并排。我想如果我在其他按钮上插入隐藏的div，也会发生同样的情况。有什么方法可以改变吗？我将按钮（标签），bttn（类）和内容（类）的显示全部更改为内联，但问题仍然存在。我认为问题可能是位置属性，但我不确定。如果是这样的情况请告诉我这里出了什么问题。

Answer 1

这将让您在一行显示所有按钮

scriptlet

但是你现在遇到的问题是当你选择显示它时，如何让你的隐藏内容不强迫其他3行。

这是迄今为止制作的CSS mod

UITableView

Answer 2

并非HTML中的所有代码都需要包含结束标记，但rl.on('line', (line) => { if (line.includes('OBJECT', 0) && !line.includes('__',0) && !line.startsWith('_', 51)) { line= line.trimRight(); line= line.trimLeft(); line = line.replace(/\s+/g, ' '); line = line.replace(/ /g, ','); lines.push(line); } var grouping=[]; for(var i=0;lines.length;i++){ if(i%8==0){ grouping.push("</br>"); } grouping.push(lines[i]); } return grouping; });绝对是其中之一。此外，正如评论中指出的那样，此片段只需要<button>两个选择器中的一个，因此我删除了其中一个。

display: none;

button {
  border: 3px solid red;
  border-collapse: collapse;
  padding: 16px;
  background-color: blue;
  width: 25%;
  margin: 0px -1px 0px -1px;
  display: inline;
}

.bttn + .content {
  display: none;
}

.bttn:hover + .content {
  display: block;
}

作为旁注，我已将HTML更改为包含引号。没有空格的属性可能没有必要（除非你使用的是XHTML文档类型），但是一致性很重要 - 形成良好的习惯可以防止很多未来的人为错误，并且以后更容易修改代码。在HTML和JS混合的情况下，你会发现交替的双/单引号是首选：

<div class="main"> <div class="bttn"><button>abcdef</button></div> <div class="content"> <a href="#">jksg</a> <a href="#">jksg</a> <a href="#">jksg</a> <a href="#">jksg</a> </div> </div> <button>abcdef</button><button>abcdef</button><button>abcdef</button>
<button onclick="alert('hey');">

...如果您更改其中任何一个示例中的引号，它将更改代码/标记的解释方式。所以，如果你想保持一致，选择一个用于标记，一个用于JS代码，然后坚持下去。虽然，我认为你会发现双引号更常用于HTML和JS中的单引号。

更新：我只是想注意，如果您使用包含JSON的data- *属性，HTML中的双引号就成了问题。这可能是我发现的与上述“标准”相反的最佳论据。但是，您仍应始终使用某种类型的引号

Answer 3

您需要在第二行和底部关闭<button>标记。我已经纠正了下面的代码，现在对我来说效果很好吗？我还在锚中的“＃”周围添加了语音标记。

<div class = main>
<div class = bttn><button>abcdef</button></div>
<div class = content>
<a href = "#">jksg</a>
<a href = "#">jksg</a>
<a href = "#">jksg</a>
<a href = "#">jksg</a>
</div>
</div>



<button>abcdef</button>
<button>abcdef</button>
<button>abcdef</button>

并排对齐按钮？

3 个答案: