Question

我正在编写一个插件，将标准表单元素标记转换为更可自定义的标记。我的选择菜单转换为无序列表。我在列表上方有一个部门，显示选择了哪个选项（列表项）。 UL的宽度相对于最长的文本。我想更改＆＃34;所选选项的宽度＆＃34;划分以匹配UL的宽度。在Chrome的开发控制台中，它显示UL的宽度略大于103px。当我在控制台中记录UL的宽度时，它显示为1,800个（我的屏幕分辨率是1920×1080，所以我猜测它与此有关）。如何获得无序列表的动态宽度？

jsFiddle

请注意，我在jsFiddle中指示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>

显然，这适用于jsFiddle，但不适用于我的HTML页面......非常困惑。

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

0 个答案: