Question

我已创建了一些移动共享按钮，我希望每个按钮的宽度为33％，但目前它们还没有延伸。

我不确定<li>是否已经有一些破坏了这种风格，或者我是否遗漏了某些东西：

<div class="mobile-share-bar">
    <ul>
        <li><script>
            var strPostUrl = &quot;<data:post.url/>&quot;;
            document.write(&quot;<a class='mobile-share-button' id='fb-mobile-button' href='http://www.facebook.com/sharer.php?u=&quot;+strPostUrl+&quot;' target='_blank'>Facebook</a>&quot;);
        </script></li>

        <li><script>
            var strPostUrl = &quot;<data:post.url/>&quot;;
            var strPostTitle = &#39;<data:post.title/>&#39;;
            document.write(&quot;<a class='mobile-share-button' id='twitter-mobile-button' href='https://twitter.com/share?text=&quot;+strPostTitle+&quot;&amp;url=&quot;+strPostUrl+&quot;&amp;via=MTS_Collective' target='_blank'>Twitter</a>&quot;);
        </script></li>

        <li style='padding-right:none;'><script>
            var strPostUrl = &quot;<data:post.url/>&quot;;
            var strPostTitle = &#39;<data:post.title/>&#39;;
            var strNewUrl = strPostUrl.replace(&quot;http://&quot;,&quot;&quot;);
            var strNewTitle = strPostTitle.replace(/&quot;/g, &#39;&quot;&#39;);
            document.write(&quot;<a class='mobile-share-button' id='tumblr-mobile-button' href='http://www.tumblr.com/share/link?url=&quot;+strNewUrl+&quot;&amp;name=&quot;+strNewTitle+&quot;' target='_blank'>Tumblr</a>&quot;);
        </script></li>
  </ul>
</div>

        .mobile-share-bar {
            display: inline;
            width: 100%;
        }

        .mobile-share-bar ul {
            -webkit-padding-start: 0;
            padding-bottom: 4px;
        }

        .mobile-share-bar li {
            display: inline;
            width: 33%;
            list-style-type: none;
            padding-right: 5px;
        }

        .mobile-share-button {
            margin: 0.5em 0;
            -webkit-border-radius: 4px 4px;
            -moz-border-radius: 4px 4px;
            -ms-border-radius: 4px 4px;
            -o-border-radius: 4px 4px;
            border-radius: 4px 4px;
            background-color: #3b5999;
            border-color: #8f8f8f;
            box-shadow: none;
            padding: 6px;
            text-shadow: none;
            font-weight: normal;
            font-size: 0.8125em;
            letter-spacing: 0.125em;
            text-transform: uppercase;
        }

        #fb-mobile-button {
            background-color: #3b5999;
        }

        #twitter-mobile-button {
            background-color: #00b0ed;
        }

        #tumblr-mobile-button {
            background-color: #3f5a6f;
        }

        a#fb-mobile-button.mobile-share-button, a#twitter-mobile-button.mobile-share-button, a#tumblr-mobile-button.mobile-share-button
        {
            color: #fff;
            text-decoration: none;
        }

任何帮助都会非常感激！

网站：http://www.mtscollective.com（回复时）

Answer 1

问题是在内联元素上设置宽度。看到这个小提琴：

.mobile-share-bar li {
  display: block;
  float:left;
  width: 32%;
  list-style-type: none;
  padding-right: 1%;
  text-align:center;
}

http://jsfiddle.net/John_C/4dHkb/

Answer 2

尝试此更改，我有编辑显示和宽度属性（删除右边的填充）

.mobile-share-bar li {
    display: inline-block;
    list-style-type: none;
    width: 32%;
}

按百分比拉伸响应元素

2 个答案: