如何使用HTML / CSS删除边框和列表之间的空格？

Question

我想删除边框左侧和无序列表之间的空格。

在右侧，名单和边界之间几乎没有任何空间;这就是我希望它在左侧的方式。

＆＃13;

＆＃13;

ul {
  display: inline-block;
  border: 5px solid red;
  padding: 1px;
}

＆＃13;

<ul>
  <li>Kilimanjaro</li>
  <li>Table Mountain</li>
  <li>Matterhorn</li>
  <li>Denali</li>
  <li>Cerro Torre</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您还必须为li设置填充。

li{
  padding:0.125em;
}

Answer 2

我认为这是 -webkit-padding-start 属性。默认情况下，Chrome设置为40px：

您可以将其删除，然后添加所需的填充：

ul {
  display: inline-block;
  border: 5px solid red;
  padding: 1px;
  -webkit-padding-start: 0px;
     -moz-padding-start: 0px;
          padding-start: 0px;
}

检查JSFiddle

Answer 3

$subdomains = [];
$comments = [];

$subdomainLen = strlen('subdomain:');
$commentLen = strlen('comment:');

$str = '{item_type:a,custom_domain:"google.com",subdomain:analytics,duration:324.33, id:2892928, comment:goahead,domain_verified:yes}, {item_type:b,custom_domain:"yahoo.com",subdomain:news,comment:awesome,domain_verified:no}, {item_type:c,custom_domain:"amazon.com",subdomain:aws,width:221,image_id:3233,height:13, comment:keep it up,domain_verified:no}, {item_type:d,custom_domain:"facebook.com",subdomain:m,slug:sure,domain_verified:yes}';

// While we found the 'subdomain' pattern
while(($subdomainPos = strpos($str, 'subdomain')))
{
    // Removes all char that are behind 'subdomain'
    $str = substr($str, $subdomainPos + $subdomainLen);

    // Retrieves the subdomain str and push to array
    $subdomains[] = substr($str, 0, strpos($str, ','));

    // If pattern 'comment' exists, do the same as before to extract the comment
    if($commentPos = strpos($str, 'comment'))
    {
        $str = substr($str, $commentPos + $commentLen);
        $comments[] = substr($str, 0, strpos($str, ','));
    }
}

Answer 4

只需将 ul 元素中的 padding 设置为 0。它应该看起来像：

class AuthenticationWrapper extends StatelessWidget {
  const AuthenticationWrapper({
    Key? key,
  }) : super(key : key);

  @override 
  Widget build(BuildContext context) {
    return StreamBuilder(
    stream: FirebaseAuth.instance.authStateChanges(),
    builder: (BuildContext context, snapshot) {
      if (snapshot.hasData) {
        return Navigation();
      } else
        return LandingPage();
    });
  }
}

ul {
  display: inline-block;
  border: 5px solid red;
  padding: 0px;
}