Front end development is new to me and I'm trying to learn, but I've hit a roadblock. I have 4 components - 2 buttons and 2 tabs that I want to style in a header at the top of the page. Specifically, I want one button on the top left with padding, another button on the top right with padding, and the tabs centered in the middle. I am utilizing jquery, jquery mobile, and angularjs. After researching their APIs, I couldn't find a straightforward solution, so it seems like custom CSS is needed. Currently, my components look like this:
<button>Button 1</button>
<div data-role="tabs" id="tabs">
<div data-role="navbar">
<ul>
<li ng-class="{active: navigation.isSelected(1)}" >
<button ng-click="navigation.selectTab(1)">Tab 1</button>
</li>
<li ng-class="{active: navigation.isSelected(2)}">
<button class="ui-btn-active" ng-click="navigation.selectTab(2)">Tab 2</button>
</li>
</ul>
</div>
</div>
<button>Button 2</button>
I attempted wrapping everything in another div and setting floats, but encountered issues. When I tried to float the second button to the right, it moved to a new line, and there isn't a center float option. As a novice in this field, any guidance would be greatly appreciated!