小编Joh*_*nes的帖子

我想创建一个这样的多列列表:https: //jsfiddle.net/37dfwf4u/

为每列使用不同的列表时没问题:

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
</ul>
<ul>
    <li>item5</li>
    <li>item6</li>
    <li>item7</li>
    <li>item8</li>
</ul>

ul {
    display:inline-block;
}

但是,这可以通过连续列表和纯CSS来完成,以便CSS自动排列列吗？例如,使用我还不熟悉的flex布局？

我们可以用<noscript>来说抱歉,这个网站需要运行JavaScript.

有什么类似的方式宣布该网站不支持屏幕阅读器？有点像<noscreenreader>Sorry, ...</noscreenreader>.

(短背景故事:它是依赖于创意转化为应用程序从未使用的话它在很大程度上依赖于影像来传达信息这是没有意义的宣布.任何在口语中.)

我希望将预准备语句的完整结果作为数组(键/值对)得到,以便稍后在str_replace()函数中使用它.

我的表有三列,索引和字段"x1"和"x2".我成功使用了以下内容:

$db = new mysqli("servername", "username", "pw", "dbname");

if($ps1 = $db->prepare("SELECT x1, x2 FROM my_table")) {
  $ps1->execute();
  $ps1->bind_result($search, $replace);
    $result = array();
    while ($ps1->fetch()) {
      $result[$search] = $replace;
    }
    $ps1->close();
}

但是,我认为必须有一个更简单的方法,没有while循环,得到完整的结果,而不是逐个单行添加.

我查看了其他问题,我想出了以下内容,但它不起作用("警告:mysqli_fetch_assoc()期望参数1为mysqli_result"):

if($ps1 = $db->prepare("SELECT x1, x2 FROM my_table")) {
  $ps1->execute();
  $result = mysqli_fetch_assoc($ps1);
  return $result;
  $ps1->close();
}

我也试过$result = mysqli_fetch_all($ps1);没有成功(获得"调用未定义的函数mysqli_fetch_all()").

顺便说一下,我使用的是PHP 5.6.

关于MYSQLND的评论中的一些答案和讨论之后的补充:

phpinfo()在其mysqlnd部分中显示以下信息:

加载的插件:mysqlnd,debug_trace,auth_plugin_mysql_native_password,auth_plugin_mysql_clear_password,auth_plugin_sha256_password

我正在尝试在HTML中为div元素添加边框.以下是我的代码.

#container-border {
  border-width: 2px;
  border-color: red;
}

<div id="container-border">
  ...
</div>

由于某种原因,边框没有出现.我看了一个类似的问题(这里),但我无法弄清楚为什么没有出现边框.有什么建议吗？

注意:此代码段是HTML页面的一部分.可根据要求提供附加代码

我试图在"页面"的两端获得两个不同的文本,以便为移动应用程序说话.

我希望它看起来像这样:

|-----------------------------|
|DATE                  MESSAGE|

但在同一条线上.

目前我已经设置如下:

<div id="HASH" class="blue-msg">
<span id="time-HASH" class="smalltext">9 months 2 weeks ago</span>
<span class="ios-circle">MESSAGE HERE</span>
</div>

随着ios-circle跨度的display: inline-block设定.

MESSAGE也可以用于多行(如iOS聊天窗口),如下所示:

|-----------------------------|
|DATE                  MESSAGE|
|                      MESSAGE|

我不在乎DATE文本是在邮件顶部附近还是在邮件中心附近对齐.要么对我来说都很好看.

我该怎么做呢？如果可能的话,我更倾向于不使用浮子.

我有一个跨度，display:none但仍然需要它的高度和宽度，有没有办法在不改变显示或使用的情况下实现它visibility:hidden？

.mySpan{
   display:none;
}

<div>
  <label>Name</label>
  <input type="text" id="personName" name="personName" />
  <br/>
  <span class="mySpan">Text that can be displayed or not</span>
</div>
<div>
  <label>Last name</label>
  <input type="text" id="personLastName" name="personLastName" />
  <br/>
  <span class="mySpan">Text that can be displayed or not</span>
</div>

我需要跨度的高度，以便在 div 之间始终存在距离visibility=hidden。

我了解到<abbr>标签应该由屏幕阅读器解释，其title属性将在屏幕阅读器阅读时替换其内容。但是，当我尝试这样做时，MacOS（Firefox 和 Safari）Voiceover 和 NVDA（Windows 10、Edge 和 Firefox）都不能那样工作。这是相关的代码部分：

... bla bla bla <abbr title="nervus">N.</abbr> peronaeus ...

（这是医学表达）

IMO 这应该读作“...... bla bla bla nervus peronaeus ...”，但它读作“...... bla bla bla N.”，然后是长时间的沉默（或者屏幕阅读器甚至停在它之前），显然是因为点，然后是“peronaeus ......” - 没有“nervus”......

我是否正确使用了语法还是我遗漏了什么？或者，如果这是正确的：是否有任何 WAI-ARIA 代码或类似的代码可以添加以使其按照大多数屏幕阅读器应该的方式工作？

我正在text-align: right我的 CSS 中尝试，但 text-align 由于某种原因没有移动它。我希望网站标题左对齐，图标右对齐在同一行。这就是我正在尝试的。

JS小提琴

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

<div class="top-container">
    <h2>Website Title</h2>

    <i class="fas fa-bars"></i>
</div>

CSS

body {
  margin: 0;
}

.top-container {
    padding: 20px;
    margin: 0;
    width: 100%;
    color: rgb(255, 255, 255);
    background-color: rgba(0, 0, 0, 0.75);
    font-size: 2em;
    font-weight: bold;
}

.top-container i {
    color: red;
    display: inline-block;
    text-align: right;
}

.top-container h2 {
    display: inline-block;
}

h2 {
  margin-top: 10px;
}

我需要在移动设备上看到这样的布局

-----
| 1 |
-----
| 2 |
-----
| 3 |
-----

在桌面上就像这样:

---------
|   | 1 |
| 2 |---|
|   | 3 |
|   |----
|   |
-----

我决定使用flexbox,我的代码到目前为止:

<div class="row">
  <div class="col-xl secound">2</div>
  <div class="col-sm first">1<br>2<br>3<br>4</div>
  <div class="col-xl third">3</div>
</div>

.row {
  display: flex;
  flex-flow: row wrap;
}

.col-sm,
.col-xl {
  width: 100%;
}

.col-sm {
  background: yellow;
}

.col-xl {  
  &.secound {
    background: #ccc;
  }

  &.third {
    background: #aaa;
  }
}

@media (min-width: 700px) …

我正在尝试使用column-countcss 属性div在 4 列中呈现s。

但是当列包装器中有 3n 个项目（3、6、9...）时，只有三列被填充，第四列是空的！

CSS：

.columns {
    -webkit-column-count: 4; /* Chrome, Safari, Opera */
    -moz-column-count: 4; /* Firefox */
    column-count: 4;
}
.item {
    display: inline-block;
    widtth: 100%;
    border: 1px solid red;
}

HTML：

<div class="columns">
<div class="item">Lorem ipsum dolor sit amet 1</div><div class="item">Lorem ipsum dolor sit amet 2</div><div class="item">Lorem ipsum dolor sit amet 3</div>
<div class="item">Lorem ipsum dolor sit amet 4</div><div class="item">Lorem ipsum dolor sit amet 5</div><div class="item">Lorem ipsum dolor sit amet …