如何使用jQuery获得无序列表的动态宽度？_Jquery_Html_List_Width

如何使用jQuery获得无序列表的动态宽度？

jquery html list

如何使用jQuery获得无序列表的动态宽度？,jquery,html,list,width,Jquery,Html,List,Width,我正在编写一个插件，将标准表单元素标记转换为更可定制的标记。我的选择菜单将转换为无序列表。我在列表上方有一个分区，显示选择了什么选项（列表项）。UL的宽度是相对于最长文本的。我想更改“选定选项”分区的宽度，以匹配UL的宽度。在chrome的开发控制台中，它显示UL的宽度略高于103px。当我在控制台中记录UL的宽度时，它显示为1800左右（我的屏幕分辨率是1920乘1080，所以我猜这与此有关）。如何获得无序列表的动态宽度注意，我在JSFIDLE的该窗格中指出css文件的起始位置我的HTM

我正在编写一个插件，将标准表单元素标记转换为更可定制的标记。我的选择菜单将转换为无序列表。我在列表上方有一个分区，显示选择了什么选项（列表项）。UL的宽度是相对于最长文本的。我想更改“选定选项”分区的宽度，以匹配UL的宽度。在chrome的开发控制台中，它显示UL的宽度略高于103px。当我在控制台中记录UL的宽度时，它显示为1800左右（我的屏幕分辨率是1920乘1080，所以我猜这与此有关）。如何获得无序列表的动态宽度

注意，我在JSFIDLE的该窗格中指出css文件的起始位置

我的HTML：

<html>
<head>
    <title>jqForminator Demo</title>
    <link rel="stylesheet" href="css/demo.css"/>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="js/jqforminator.js"></script>
</head>
<body>
<h1>jqForminator Demo</h1>
<p>The jqForminator jQuery plugin transforms the standard form element markup into more customizable markup.</p>

<form action="" id="forminator">
    <div class="form-row">
        <label>Select Menu</label><br>
        <select name="selection">
            <option value="1">First Option</option>
            <option value="2">Second Option</option>
            <option value="3" SELECTED>Third Option</option>
            <option value="4">Fourth Option</option>
        </select>
    </div>
    <div class="form-row">
        <label>Checkboxes</label>
        <ul class="horizontal-list">
            <li>Apples <input type="checkbox" name="checkboxes" value="1"></li>
            <li>Bananas <input type="checkbox" name="checkboxes" value="2"></li>
            <li>Oranges <input type="checkbox" name="checkboxes" value="3"></li>    
        </ul>
    </div>
    <div class="form-row">
        <label>Radio Buttons</label>
        <ul class="horizontal-list">
            <li>Pizza <input type="radio" name="radios" value="1"></li>
            <li>Tacos <input type="radio" name="radios" value="2"></li>
            <li>Spaghetti <input type="radio" name="radios" value="3"></li>
        </ul>
    </div>
</form>

<script type="text/javascript">
    $(document).ready(function(){
        $('#forminator').jqForminator({
            select_menus : true,
            checkboxes : true,
            radio_buttons : true,
            css_path : 'css'
        });
    });
</script>

</body> 
</html>


jqForminator演示
jqForminator演示
jqForminator jQuery插件将标准表单元素标记转换为更可定制的标记
选择菜单

第一选择
第二种选择
第三种选择
第四种选择
复选框

苹果
香蕉
橘子

单选按钮

披萨
玉米卷
意大利面

$（文档）.ready（函数（）{
$（'#forminator'）.jqForminator({
选择菜单：true，
复选框：正确，
单选按钮：正确，
css_路径：“css”
});
});

显然，这在JSFIDLE中有效，但在我的HTML页面上不起作用。。。非常困惑。

请在您的问题中发布相关的HTML（假设这就是Web Inspector的图片的用途？）。理想情况下，一个或类似的演示对再现您当前的情况和问题非常有用。但是，请只发布最少量的代码，而不是所有的代码。我编辑了这个问题，以包含一个JSFIDLE链接以及HTML代码，而不是jQuery，因为它在JSFIDLE中。