顯示內嵌表單元素

我正在關注來自http://www.sitepoint.com/building-list-jquery-local-storage/ 的教程以構建待辦事項列表，並且想要顯示同一行中的元素。此刻，表單元素相互堆疊並垂直顯示，但我希望它們垂直顯示。我最終想達到的結果，看起來像這樣：顯示內嵌表單元素

enter image description here

這裏是CSS Code

.task-list{ 
    width: 250px; 
    float: left; 
    margin: 0 5px; 
    background-color: #e3e3e3; 
    min-height: 240px; 
    border-radius: 10px; 
    padding-bottom: 15px; 

} 

.task-list input, .task-list textarea{ 
    width: 240px; 
    margin: 1px 5px; 


} 

.task-list input{ 
    height: 30px; 

} 

.todo-task{ 
    border-radius: 5px; 
    background-color: #fff; 
    width: 230px; 
    margin: 5px; 
    padding: 5px; 
} 

.task-list input[type="button"]{ 
    width: 100px; 
    margin: 5px; 

} 

.todo-task > .task-header{ 
    font-weight: bold; 
} 

.todo-task > .task-date{ 
    font-size: small; 
    font-style: italic; 
} 

.todo-task > .task-description{ 
    font-size: smaller; 
}

下面是HTML代碼

<div class="task-list"> 
    <h3>Add a task</h3> 
    <form id="todo-form"> 
    <input type="text" placeholder="Task Name" /> 
    <textarea placeholder="Description"></textarea> 
    <input type="text" id="datepicker" placeholder="Due (dd/mm/yyyy)" /> 
    <input type="button" class="btn btn-primary" value="Add Task" onclick="todo.add();" /> 
    </form> 

    <input type="button" class="btn btn-primary" value="Clear Data" onclick="todo.clear();" /> 
    <div id="delete-div"> 
    Drag Here to Delete 
    </div> 
</div> 

<div class="task-list task-container" id="pending"> 
    <h3>Pending</h3> 
    <!--<div class="todo-task"> 
    <div class="task-header">Sample Header</div> 
    <div class="task-date">25/06/1992</div> 
    <div class="task-description">Lorem Ipsum Dolor Sit Amet</div> 
    </div>--> 
</div>

來源

2014-09-13 user35434494

你的依賴關係呢？它是TW Boostrap？你能設置一個JSFiddle嗎？ – felipekm 2014-09-13 19:25:09

您將'.task-list'的寬度設置爲250px，並將每個輸入的寬度設置爲240px。他們如何能夠並肩？ – Barmar 2014-09-13 19:25:10

我已將他的代碼複製到小提琴中：http://jsfiddle.net/barmar/76w02s1z/ – Barmar 2014-09-13 19:25:32

你只需要改變

.task-list { 寬度：250px;

（在你的CSS的最頂部找到）

喜歡的東西

。任務列表{ 寬度：850像素;

這會給空間房間內的所有元素並排...

來源

2014-09-13 20:26:49 gavsgav

增加.task列表中的寬度doest help是在'pending'bod中並排顯示元素 – user35434494 2014-09-13 20:37:23

顯示內嵌表單元素

回答

相關問題